css3

来源：互联网发布：网络奇兵剧情编辑：程序博客网时间：2024/06/15 05:14

兼容性：

浏览器 Firefox Safari Opera Chrome 各浏览器兼容性写法 -moz-border-radius -webkit-border-radius border-radius border-radius/-webkit-border-radius

这里写图片描述

html：

<div>示例文字示例文字</div>

css：

div {    width: 100px;    background-color: pink;    padding: 10px;    border: 3px solid red;    border-radius: 20px;    -moz-border-radius: 20px;/*兼容Firefox*/    -o-border-radius: 20px;/*兼容Opera*/    -webkit-border-radius: 20px;/*兼容Chrome、Safari*/}

解析：border-radius:左上角、右上角、右下角、左下角；
图一是设置一个圆角；
图二是设置两个圆角，即border-radius: 30px 10px;；
图三是不显示边框；
图四是边框线为虚线；
图五是设置四个圆角，即border-radius: 5px 15px 25px 40px;；

0 0