css怎样给元素加入边框?


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

Image placeholder
前端答疑
未设置
  62人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css设置边框可以用哪个属性?

css设置边框可以用border简写属性,它可以在一个声明设置所有的边框属性,按照border-width、border-style、border-color顺序设置;也可以单独使用这几个属性来设置边

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

HTML中行内元素与块级元素区别有什么?

HTML中行内元素与块级元素区别有什么?区别有:●行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的。●块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。●行内元素不可

块级元素和行级元素

块级标签:divph1-h6ulol等,行内标签:aspan等行内块标签:imginputbutton等. ####行内块特点: 1.不独占一行 2.可以设置宽高

jQuery怎样获取同级元素?

jQuery怎样获取同级元素?在jquery中,获得同级元素的方法一般有七个,分别是siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、p

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

css怎么画三角形?

css怎么画三角形?三角形实现原理:宽度width为0;height为0;方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css怎么让字体不换行?

在css中,可以使用white-space属性来强制文字字体不换行;通常我们使用white-space:nowrap来强制文本文字内容不换行,文本会在在同一行上显示,直到遇到标签为止。示例:

css怎么做直角三角形

css怎么做直角三角形一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,

thinkphp加载不了css怎么办?

thinkphp加载不了css怎么办?如何解决?解决方法:1、项目入口文件index.php

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

dreamweaver中CSS怎么设置

dreamweaver中CSS怎么设置1、打开软件后,我们可以直接按下快捷键【Ctrl+J】2、或者,我们点击菜单栏的修改命令按钮。3、然后,我们点击页面属性按钮。4、接下来我们就会看到页面属性这个窗

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

css怎么适配不同分辨率屏幕?

这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。我们可以使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

jq css怎么用?

jqcss怎么用?jquery中,css()方法用来返回或设置匹配的元素的一个或多个样式属性。语法:$(selector).css(name) $(selector).css(name,value)

css怎么控制网页内容不让选择和复制?

css怎么控制网页内容不让选择和复制?要想通过CSS禁用页面内容选中和复制操作,需要增加如下代码:-moz-user-select:none; -webkit-user-select:none; -m

iis不加载css怎么办?

iis不加载css怎么办?解决方法:打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容选中后安装即可。

ie6加载不了css怎么解决?

ie6加载不了css怎么解决?IE6不加载css文件,是因为css文件的编码不正确,使用记事本创建的css文件,默认编码时ANSI,这种情况下在其他浏览器下CSS样式会正常显示,但IE6及以下版本就不

邮件不支持css怎么办?

邮件不支持css怎么办?邮件是支持css的,但是需要使用内联样式,内部样式和外部样式无法使用。下面是一些在邮件中使用css的注意事项:1.邮件使用table+css布局2.邮件主要部分在body内部,