您的位置：首页 > Web前端 > CSS

css3-边框圆角阴影等属性

2016-11-21 20:26 609 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--------------------------------边框圆角--------------------------------->
<!--/*默认上 下 左 右都是20*/-->
<!--/*border-radius: 20px;*/-->

<!--/*水平半径 垂直半径 right,left,top 等为盒子的倒角位置*/;-->
<!--/*border-top-right-radius: 20px 100px;*/-->
<!--/*border-top-left-radius:60px 120px;*/-->
<!--/*border-top-right-radius:60px 120px;*/-->
<!--/*border-bottom-left-radius:60px 120px;*/-->
<!--/*border-bottom-right-radius:60px 120px;*/-->

<!--/*复合属性*/-->
<!--/* border-radius: 水平半径{1,4}/垂直半径{1,4}  */-->
<!--/*60px为水平半径  120px为垂直半径*/-->
<!--/*border-radius: 60px/120px;*/-->

<!--/*顺时针的赋值顺序，首先总左上 –>右上——》右下--》左下*/-->
<!--/*border-radius:10px  10px  50px 200px;-->

<!--/* 两个值时 ，-->
<!--第一个值是 左上 和右下-->
<!--第二值是： 右上和左下*/-->
<!--/*三个值时*/-->
<!--/*第一个值：左上*/-->
<!--/*第二值：右上 和左下*/-->
<!--/*第三个值： 右下*/-->

<!--/*border-radius: 60px;*/-->
<!--/*border-radius赋值顺序*/-->
<!--/* 4个角的水平垂直半径都是120*/-->
<!--/*border-radius: 120px; */-->

<!--/* 两个值时 ，-->
<!--第一个值是 左上 和右下-->
<!--第二值是： 右上和左下*/-->
<!--/*border-radius: 60px 120px;*/-->

<!--/*三个值时*/-->
<!--/*-->
<!--第一个值：左上-->
<!--第二值：右上 和左下-->
<!--第三个值： 右下-->
<!--}-->

<!-------------------------------边框阴影---------------------------------------->
<!--.box{-->
<!--width: 200px;-->
<!--height: 300px;-->
<!--background-color: #fff;-->
<!--margin:100px auto;-->
<!--/* box-shadow: 水平位移 垂直位移  模糊程度 阴影的大小  阴影颜色 内阴影（inset）*/-->
<!--/* 外阴影：outset  默认值不用写  */-->
<!--box-shadow: 10px 10px 30px 1px red inset;-->
<!--}-->
</head>
<body>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

css3-边框 圆角 阴影 等属性

css3-边框圆角阴影等属性