首页 > html_css > 正文

初识 CSS Shapes —– (二)-大前端
2018-12-10 15:33:05   来源:   评论:0 点击:

上一篇主要介绍了通过函数方法创建矩形、圆等基本图形,今天主要了解盒模型、图片计算出来的形状。1、盒模型(包括 border-radius 的弧度

上一篇主要介绍了通过函数方法创建矩形、圆等基本图形,今天主要了解盒模型、图片计算出来的形状。

1、盒模型(包括 border-radius 的弧度)

See the Pen shape-outside by cc (@glccgl) on CodePen.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

2、url值-提取并计算指定 image的alpha通道得出形状,可通过shape-image-threshold设置阈值(需注意图片跨域问题)

.shape-img {     float: left;     width: 400px;     height: 207px;     shape-outside: url(./images/shape-img.png);     shape-image-threshold: 0; }

效果下图:\

3、渐变,可通过shape-image-threshold设置阈值

\

 

相关热词搜索:

上一篇:初识 CSS Shapes-大前端
下一篇:这样的广告请再来一打 — background-attachment-大前端

分享到: 收藏
评论排行