×

CSS新手入门:border-radius绘制圆角应用

作者:andy0012020.06.08来源:Web前端之家浏览:378评论:0
关键词:htmlborder-radius
微信公众号

微信公众号

CSS新手入门:border-radius绘制圆角应用。

border-radius是css中设置圆角边框的属性。border-radius属性是一个简写属性,用于设置四个border-*-radius属性。

border-radius的使用:

border-radius的数值有三种表示方法:px、%、em,对于border-radius的值的设置,我们常用的有三种写法:

(1)仅设置一个值

第一种方法,应该是我们最常用的一种情况了,常用来给button加圆角边框,或者画一个圆形按钮,仅需设置一个数值,即可给元素的四个边角设置统一的圆角弧度

#test1 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 30px;
}

2)设置四个方向的值

border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式。

这里要注意四个数值的书写顺序,不同于padding和margin的“上、右、下、左”的顺序,border-radius采用的是左上角、右上角、右下角、左下角的顺序。

#test3 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 50px 0px;
}

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/html20200608.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    点多...

  • kaifa8

    小公司很少会去搞这种开发自动化,都只是看重结果。...

  • 访客

    你可以加群去问...

  • 访客

    怎么注册?不会...

  • ajoy

    说法可以是一样的,毕竟JS和JQ都是有“血缘关系”的,你可以自己改下不就可以了吗,哈哈!...

  • 访客

    标题是JS用了JQ误人子弟呢...

  • absoy

    vue居然还能这么玩,期待你们vue3.0中文版教程。...

  • caij2

    github也中了新冠病毒了吧,哈哈!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.4 Valyria