css3 圆角菜鸟教程 |cssX旋转360度

css实现换肤，css纵向垂直靠上，css中固定按钮位置，css里面 id怎么使用，css删除线标签属性大全，多选框css只变颜色，cssX旋转360度 css3 圆角菜鸟教程 |cssX旋转360度

1.基本语法

div{
border-radius: 5px; //设置四个角的圆角半径为5px
}

2.设置不同圆角半径

div{
border-radius: 10px 5px 2px 8px; //分别设置四个角的半径
}

3.使用关键字

div{
border-radius: 50% 0 0 50%; //设置一个半圆形(左上和右下)
}

4.使用多个圆角

div{
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 8px;
}

5.应用阴影效果

div{
border-radius: 10px;
box-shadow: 0 0 10px #ccc; //设置阴影效果
}

总结

使用 CSS3 圆角能够为网站带来更高的美观度，且设置简单灵活，能够满足绝大多数设计需求。但是在设置圆角时，需注意不同元素和不同场合的需求以及效果表现。