css3 圆角

来源:互联网 发布:河南安全教育网络平台 编辑:程序博客网 时间:2024/05/16 05:13

css 3中的圆角

在有点时候为了效果更加的美观我们需要对四个角进行更加细腻的加工

如下图:

代码:

<style>        .div1{            padding: 30px;   //填充内边距            background:blueviolet;  //背景颜色            width: 300px;   //宽度            border: 2px solid;//边框 参数:2px,实线            border-top-left-radius: 10px; //左上角            border-top-right-radius: 10px; //右上角            border-bottom-left-radius: 10px; //左下角            border-bottom-right-radius: 10px; //左下角            /*border-radius:50px 50px 50px 50px;*/  //这一行等价于上                               面四行, 左上角,右上角,右下角,左下角        }    </style> </head><body><div>    <div class="div1">一个值。四个值的角</div></div>