CSS3边框和圆角——border&radius
圆角
原理&语法
给需要添加圆角的元素设置border-radius属性，设置后，元素原本方形的角变成圆角的
其中可单独设置四个边，也可同时设置（顺序为左上角-右上角-右下角-左下角，即顺时针转动），如果缺失一个值，默认对角线位置值相等
单独设置时，先写上下（top/bottom），再写左右（left/right），如border-top-left-radius
值可为绝对长度（px）/百分比（以元素高度为参考）/em（以浏览器默认字体大小为参考）等
案例
可通过添加before和after伪元素以及position定位，形成一个类似冒泡的对话框
（此处设置了行高，但是行高的垂直居中对齐效果未显示）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{margin:0;padding:0;} 10 div.origin{ 11 width:400px;height:150px; 12 border:5px solid black; 13 border-radius:50%; 14 text-align:center; 15 line-height:150px; 16 font:bolder 30px '微软雅黑'; 17 position:absolute;top:50px;left:50px; 18 } 19 div.origin:before,div.origin:after{ 20 content:""; 21 width:25px;height:25px; 22 border:2px solid black; 23 border-radius:50%; 24 } 25 div.origin:before{ 26 position:absolute;top:150px;left:450px; 27 } 28 div.origin:after{ 29 position:absolute;top:200px;left:500px; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="origin">welcome</div> 35 </body> 36 </html>
盒阴影
原理&语法
可给需要添加阴影的元素添加box-shadow属性，从而设置一个/多个下拉阴影的框
共有6个属性值可设置，包括：
shadow
即偏移量，包括水平和垂直两个方向，都是相对于原元素，下/右为正，可为负值
blur
从阴影内到阴影边界颜色逐渐淡出，设置过渡的长度，单位可为px，不可为负值
spread
在原边界的基础上阴影扩大，上下左右均扩大设置的数值
color
阴影的颜色
inset/outset
变成内部阴影，默认值为none（不设置）
边界图片
原理&语法
即给元素的边框设置图片
其中包括5个属性：
source
即图片的路径，用url设定相对地址/绝对地址，也可设置为none（默认值）
slice
指定图片的边界向内偏移的量，可以为值/%/fill（）
一般图片会被切成9块（点九切图法），如下图所示，而border-image默认不要中间的9，要的只是1-4这四块
设置fill时，中间部分的9也会出现，把边框逼到边上去
width
指定图像边界宽度，可设置为值/%/fill
outset
以边框的宽度为参考，向外扩张给定数值的长度，值为px/固定数值
repeat
边框图片是否重复，可设置重复（repeat）、拉伸（stretch）、铺满（rounded）、initial（默认值）或继承（inherit）
