css3之图形绘制
2018-08-21 05:37:24来源:博客园 阅读 ()
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制。。。样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣!
以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的,我们先了解下它们的基本原理。
border:简单的来说border语法主要包含(border-width、border-style、border-color)三个属性。
-
- ? border-top(上边框):border-width border-style border-color
- ? border-right(右边框):border-width border-style border-color
- ? border-bottom(下边框):border-width border-style border-color
- ? border-left(左边框):border-width border-style border-color
border-radius:border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。它所对应的各个展开式属性:
-
- ? border-top-left-radius(左上圆角半径)
- ? border-top-right-radius (右上圆角半径)
- ? border-bottom-right-radius (右下圆角半径)
- ? border-bottom-left-radius(左下圆角半径)
border-image:共有三个属性,分别是图片(border-image-source)、剪裁位置(border-image-slice)、重复性(border-image-repeat)。
图片:使用URL调用
剪裁位置:共有1~4个参数,没有单位(默认是像素),也可以用百分比
-
- 第一个参数a:距离上边相应长度进行裁剪
- 第二个参数b:距离右边相应长度进行裁剪
- 第三个参数c:距离下边相应长度进行裁剪
- 第四个参数d:距离左边相应长度进行裁剪
重复性:有三个参数 stretch(默认值),round,repeat
-
- 默认值是stretch,拉伸的意思,可以看到上面的效果图中,“2”是垂直拉伸的,“>”是水平拉伸的,而中间的格子是水平垂直一起拉伸的。
- round是平铺
- repeat是重复
话不多说,来直接看下效果:
1、三角形系列(三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角)
主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明);
.triangle-up { /* 三角形 */ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #f00; } .triangle-down { /* 倒三角 */ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #f00; } .triangle-left { /* 左三角 */ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid #f00; } .triangle-right { /* 右三角 */ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid #f00; } .triangle-topleft { /* 左上三角 */ width: 0; height: 0; border-right: 100px solid transparent; border-top: 100px solid #f00; } .triangle-topright { /* 右上三角 */ width: 0; height: 0; border-left: 100px solid transparent; border-top: 100px solid #f00; } .triangle-downleft { /* 左下三角 */ width: 0; height: 0; border-right: 100px solid transparent; border-bottom: 100px solid #f00; } .triangle-downright { /* 右下三角 */ width: 0; height: 0; border-left: 100px solid transparent; border-bottom: 100px solid #f00; }
2、梯形(三角形的变体,设置左右两条边相等,并且给它设置一个宽度)
.Trapezium { height: 0; width: 100px; border-bottom: 100px solid #dc2500; border-left: 50px solid transparent; border-right: 50px solid transparent; }
2、爱心(心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来元素的旋转中心点)
.love { /* 爱心 */ position: relative; } .love:before { content: ""; width: 70px; height: 110px; background: #f00; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(45deg); } .love:after { content: ""; width: 70px; height: 110px; background: #f00; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(-45deg); left: -30px; }
3、 食人豆(吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形)
.pacman { /* 食人豆 */ width: 0; height: 0; border: 60px solid #f00; border-right: 60px solid transparent; border-radius: 100%; }
4、对话框(消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形)
.alertDialog { /* 对话框:一个圆角矩形和一个小三角形 */ width: 150px; height: 100px; background: #f00; border-radius: 10px; position: relative; } .alertDialog:before { content: ""; width: 0; height: 0; position: absolute; left: -20px; top: 40px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 20px solid #f00; }
5、钻石(首先画一个直角梯形,再通过伪类元素在其下方画一个三角形)
.diamond { /* 钻石:梯形和三角形组成 */ width: 50px; height: 0; position: relative; border-bottom: 25px solid #f00; border-left: 25px solid transparent; border-right: 25px solid transparent; } .diamond:before { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 70px solid #f00; left: -25px; top: 25px; }
6、五角星(星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边)
.starFive { /* 五角星: */ width: 0; height: 0; position: relative; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 60px solid #f00; transform: rotate(35deg); } .starFive:before { content: ""; position: absolute; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 60px solid #f00; transform: rotate(-70deg); top: 3px; left: -80px; } .starFive:after { content: ""; position: absolute; width: 0; height: 0; border-bottom: 60px solid #f00; border-right: 20px solid transparent; border-left: 20px solid transparent; transform: rotate(-35deg); top: -40px; left: -49px; }
7、菜单(结合::before和::after两个伪元素)
.btn-hamburger i { /* position: relative; */ display: -moz-inline-stack; display: inline-block; zoom: 1; width: 22px; height: 3px; color: #fff; font: bold .24rem/0.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #fff; transition: all 0.2s ease-out; } .btn-hamburger i::before, .btn-hamburger i::after { content: ''; width: 22px; height: 3px; background: #fff; position: absolute; left: 0; transition: 0.2s; } .btn-hamburger i::before { top: -7px; } .btn-hamburger i::after { bottom: -7px; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Day1 了解web前端
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash