html5——边框

精确控制

/*水平半径 垂直半径;*/
border-top-left-radius: 30px 40px;
border-top-right-radius: 30px 40px;
border-bottom-left-radius: 30px 40px;
border-bottom-right-radius: 30px 40px;

复合属性

border-radius: 60px/120px;//水平半径，垂直半径
border-radius: 10px 10px 10px 10px / 20px 20px 20px 40px;//同上
border-radius: 60px 120px;//第一个值是左上和右下,第二值是右上和左下
border-radius: 20px 60px 120px;//第一个值左上，第二值右上和左下第三个值右下

边框颜色

border-color:red green blue yellow;

边框阴影

/*box-shadow:3px 3px 3px 3px #666 inset;*/
box-shadow: 10px 10px 30px 1px red ;//水平位移，垂直位移，模糊程度，阴影的大小，阴影颜色，内阴影（inset）（外阴影outset默认值不用写）

边框图片

/* 边框图片的裁剪*/
/* 裁剪顺序：上右下左*/
border-image-slice: 27 27 27 27;
/*边框图片的宽度*/
border-image-width: 27px;
/*边框图片的平铺*/
/*repeat：平铺*/
/*stretch: 拉伸 */
/*round :自动计算 在平铺*/
border-image-repeat: round;

 注意事项：这个有谷歌高版本有bug，不会显示

转载于:https://www.cnblogs.com/wuqiuxue/p/8064238.html