CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc

盒模型--边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：

div{border:2px  solid  red;
}

上面是border代码的缩写形式，可以分开写：

div{border-width:2px;border-style:solid;border-color:red;
}

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

盒模型--边框（二）

现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边上、右、左边框的设置：

border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;

CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc相关推荐

html盒模型中border的写法,CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc...
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
视频教程-CSS3网页设计与制作(6-11)：颜色特性/新型盒模型/边框/背景/渐变-HTML5/CSS
CSS3网页设计与制作(6-11):颜色特性/新型盒模型/边框/背景/渐变知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老 ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
CSS字体、文本属性、CSS 盒模型
1.css字体 1.1 font-family 作用:设置文本的字体系列语法:font-family:字体名称: 常用值一个字体名称或系列名称(介绍常用字体名称.字体系列) 1.楷体 KaiTi ...
css盒模型以及如何计算盒子的宽度
css盒模型以及如何计算盒子的宽度盒模型每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子1. 每个盒子都可以看成由4部分组成,它们分别是 - 元素外边距(margin).元素边框(borde ...

CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc

盒模型--边框（一）

盒模型--边框（二）

CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc相关推荐

最新文章

热门文章

CSS盒模型--边框设置：border: 1px solid red(像素 样式 颜色 )，border-bottom:1px dotted #ccc

盒模型--边框（一）

盒模型--边框（二）

CSS盒模型--边框设置：border: 1px solid red(像素 样式 颜色 )，border-bottom:1px dotted #ccc相关推荐

最新文章

热门文章

CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc

CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc相关推荐