菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
62
0

css怎样给元素加入边框?

原创
05/13 14:22
阅读数 804

css怎样给元素加入边框?

css给元素设置边框使用 border 属性,这是一个简写属性,分别是指边框的宽度、样式、颜色。

它可以按顺序设置如下属性:

  • border-width

  • border-style

  • border-color

使用示例:(推荐学习:CSS视频教程

(1)创建一个div元素,给它一个类名app

<style>
.app{
    width: 100px;
    height: 100px;
    background: #eee;
}
</style>

<div class="app">div元素</div>

效果:

Snipaste_2020-01-08_16-56-22.png

(2)加入border属性,给元素添加边框

<style>
.app{
    width: 100px;
    height: 100px;
    background: #eee;
    border: 4px solid skyblue;
}

</style>

<div class="app">div元素</div>

效果:

Snipaste_2020-01-08_16-57-17.png

补充:

我们也可以使用 border-left、border-top、border-bottom、border-right为每条边设置不同的样式

.app{
    width: 100px;
    height: 100px;
    background: #eee;
    border-left: 2px solid pink;
    border-top: 4px solid green;
    border-bottom: 1px solid blue;
    border-right: 6px solid black;
}

效果:

Snipaste_2020-01-08_16-59-54.png

发表评论

0/200
62 点赞
0 评论
收藏
为你推荐 换一批