css 圆角 外层关系 |css hover子元素重写

.border-radius {
/*设置四个圆角为10px*/
border-radius: 10px;
/*设置左上角和右下角为10px*/
border-radius: 10px 0 0 10px;
/*设置左上角和右上角为20px，左下角和右下角为10px*/
border-radius: 20px 10px;
}

当然，与圆角配合使用的边框样式也很重要。可以通过给元素设置border属性来实现，同时也可以设置外边框和内边框。如下所示：

.box {
/*设置外边框样式和宽度*/
border: 1px solid #ccc;
/*设置阴影效果*/
box-shadow: 0 3px 3px rgba(0,0,0,.1);
/*设置圆角*/
border-radius: 20px;
}

另外，不同的元素可以嵌套使用圆角，并且可以实现不同效果。如下所示，外层元素设置了一个边框并通过border-radius属性设置了圆角，内层元素也可以使用border-radius属性设置圆角，但是由于外层边框的圆角效果，使内层元素的圆角效果只有在外层圆角内部才能生效，形成了不同的边角效果。

.outer {
/*设置外层边框*/
border: 1px solid #ccc;
/*设置圆角*/
border-radius: 5px;
/*设置内边距*/
padding: 10px;
}
.inner {
/*设置内层边框*/
border: 1px solid #ccc;
/*设置圆角*/
border-radius: 10px;
/*设置内边距*/
padding: 20px;
}