目录
目录
我们在编写前端代码时,经常会遇到各种各样的形状图形(如:三角形,圆角边框、圆等),除了用背景图片(css雪碧图或css精灵图+定位引用)和插入img图片的方法,我们还可以用css边框、圆角(border-radius)、渐变和定位的方法结合使用,绘制各种各样的形状图形。
实心圆
圆环(空心圆)
box-sizing: border-box就是将border和padding数值包含在width和height之内,这样的好处就是修改border和padding数值盒子的大小不变。
box-sizing属性的取值可以为content-box或border-box,对它们的解释如下。
●content-box:浏览器对盒模型的解释遵从W3C标准,当定义width和height时,它的参数值不包括border和padding。
●border-box:当定义width和height时,border和padding的参数值被包含在width和height之内。
半圆
四分之一圆(扇形)
比半圆少一边的值
鸡蛋
原理图:
看成一个半圆,和一个半椭圆。
椭圆
长宽一样,border-radius: 100%,就是圆;长宽不一样,border-radius: 100%就是椭圆,
胶囊
把长设置成比宽大,否则就是圆。
三角形
实现原理:
把不需要的那边设置成transparent(透明);
月亮
把宽高设成一样。
![](https://i-blog.csdnimg.cn/blog_migrate/166be7a6ea82671b3a15970e6715038d.png)
做折纸效果
note还是原来的note,仅仅是给note加了一个before伪元素。设置伪元素宽度为0,内容为空。利用边框做出三角形效果,然后通过绝对定位到右上角,最后加上阴影效果就ok啦。
代码例如以下:
.note{
display:block;
margin:100px auto;
100px;
height:100px;
background:#ff0;
padding:50px;
position:relative;
}
.note:before{
content:"";
0;
border-color:#fff #fff transparent transparent;
border-style:solid;
border-20px;
position:absolute;
top:0;
right:0;
box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
}