边框 border-radius

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值:
border-width, border-style, border-color

border-radius: 15px;
border-radius: 15px;

这条语句同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical radius)都设置为15px。

horizontal radius - vertical radius

border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

分别设置两个值和三个值

border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。

设置两组值
仔细观察体会值的应用

参考链接:CSS3圆角详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS边框属性 元素的边框就是围绕元素内容和内边距的一条或多条线。 元素的边框属性: border 简写属性,用...
    Zd_silent阅读 1,007评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,657评论 0 7
  • 感情是种很微妙的东西,近了怕腻,远了怕淡,试问有几个人能把“火候”掌握的那么好,起码我现在的年纪阅历让我做...
    张小姐爱江湖阅读 194评论 0 0
  • 「怎么做出一个形式新颖的PPT?从哪些方面入手?」 小晶你好,PPT模版市场不缺乏新颖的PPT,各路大神倾尽自己的...
    汤帅同学阅读 1,858评论 0 5
  • 月色在寂寥中沉默, 沉默是盛秋时那金黄的颜色, 在那金色的夕阳中, 劳动者辛苦致力于他的收获。 月色在沉默中颓丧,...
    化羽千灵阅读 203评论 0 0