经验分享关于CSS边框的详解

开课吧开课吧锤锤2021-04-13 11:26

    前端是互联网时代直接接触用户的窗口,大到我们每天都要浏览的网站,小到一次点击一个按钮的页面,前端到处都是。而且在产品开发的众多环节中,最能让用户直观感受到的是前端开发。因此前端行业广阔的发展前景也吸引了不少人转行学习。那零基础的人怎么学习网络前端呢?

    CSS边框

    CSS边框属性

    CSS边框属性允许你指定一个元素边框的样式和颜色。

web

    边框样式

    边框样式属性指定要显示什么样的边界。

    border-style属性用来定义边框的样式

    border-style值:

    none:默认无边框

web

    边框宽度

    您可以通过border-width属性为边框指定宽度。

    为边框指定宽度有两种方法:可以指定长度值,比如2px或0.1em(单位为px,pt,cm,em等),或者使用3个关键字之一,它们分别是thick、medium(默认值)和thin。

    注意:CSS没有定义3个关键字的具体宽度,所以一个用户可能把thick、medium和thin分别设置为等于5px、3px和2px,而另一个用户则分别设置为3px、2px和1px。

p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

    边框颜色

    border-color属性用于设置边框的颜色。可以设置的颜色:

    name-指定颜色的名称,如"red"

    RGB-指定RGB值,如"rgb(255,0,0)"

    Hex-指定16进制值,如"#ff0000"

    您还可以设置边框的颜色为"transparent"。

    注意:border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}

    边框-单独设置各边

    在CSS中,可以指定不同的侧面不同的边框:

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

    上面的例子也可以设置一个单一属性:

border-style:dotted solid;

    border-style属性可以有1-4个值:

    border-style:dottedsoliddoubledashed;

    上边框是dotted

    右边框是solid

    底边框是double

    左边框是dashed

    border-style:dottedsoliddouble;

    上边框是dotted

    左、右边框是solid

    底边框是double

    border-style:dottedsolid;

    上、底边框是dotted

    右、左边框是solid

    border-style:dotted;

    四面边框是dotted

    上面的例子用了border-style。然而,它也可以和border-width、border-color一起使用。

    边框-简写属性

    上面的例子用了很多属性来设置边框。

    你也可以在一个属性中设置边框。

    你可以在"border"属性中设置:

    border-width

    border-style(required)

    border-color

border:5px solid red;

    前端学习永远不会是单枪匹马,需要前人的引领,也需要平台的不断交流与思想碰撞。这能够快速入门,减少走弯路,还能让自己找到问题的根源。更多的Web教程尽在开课吧广场Web教程频道。

有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营