css3-边框圆角阴影等属性

最新推荐文章于 2022-07-21 17:12:40 发布

约德尔蒙

最新推荐文章于 2022-07-21 17:12:40 发布

阅读量585

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263798

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>