border-style?border-style属性有几种(分别是)可否编一小段
你是否曾想过,border-style和border-style属性有几种(分别是)可否编一小段之间是否存在联系?在本文中,小编将为您探索它们之间的关系,带您领略新的视角和见解。
css里设置border颜色
1、定义:元素的边框(border)是围绕元素内容和内边距的一条或多条线。
CSS border属性允许你规定元素边框的样式、宽度和颜色。
在 HTML中,我们使用表格来创建文本周围的边框,但是通过使用 CSS边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。
元素外边距内就是元素的的边框(border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3个方面:宽度、样式,以及颜色。
border-color属性设置四条边框的颜色。此属性可设置 1到 4种颜色。
border-color属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4个边分别设置不同的颜色。
2、用法:
例1:border-color:red green blue pink;
例2:p
{
border-style:solid;
border-color:#ff0000#0000ff;
}
您可以通过 border-width属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如 2px或 0.1em;或者使用 3个关键字之一,它们分别是 thin、medium(默认值)和 thick。
定义单边宽度
您可以按照 top-right-bottom-left的顺序设置元素的各边边框:
p{border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为:
p{border-style: solid; border-width: 15px 5px;}
注意:要设置边框的宽度才能看到
border:5px solid red;
div+css如何设置边框border
元素的边框(border)是围绕元素内容和内边距的一条或多条线。控制边框的属性是 border属性。边框在HTML元素的修饰中几乎无时无刻都会用到,给网页设计带来更丰富的视觉体验,通过 CSS border属性允许你规定元素边框的样式、宽度和颜色。--------------------------------------------------------------------------------边框与背景最新CSS2.1作出了解释:元素的背景是包括内容、内边距和边框区。也就是说,当边框是间断的(例如,虚线),在边框间断的地方应该显示的是背景。大多数浏览器都遵循 CSS2.1定义,不过一些较老的浏览器可能会有不同的表现。--------------------------------------------------------------------------------边框的样式边框样式将是所有网页设计师最为关心的一点,丰富的样式将会带来更美观的页面设计。CSS的 border-style属性定义了 10个不同的样式,包括 none。例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起的按钮”:img{border-style:outset;}--------------------------------------------------------------------------------定义多种样式同理,您可以为一个边框定义多个样式,例如:.more{border-style: solid dotted dashed double;}上面这条规则定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。--------------------------------------------------------------------------------定义单边样式如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4个边的边框样式,可以使用下面的单边边框样式属性:1. border-top-style2. border-right-style3. border-bottom-style4. border-left-style因此这两种方法是等价的:.noleft{border-style: solid solid solid none;}
.noleft{border-style: solid; border-left-style: none;}注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style之前,简写属性的值就会覆盖单边值 none。--------------------------------------------------------------------------------边框的宽度您可以通过 border-width为边框指定宽度。为边框指定宽度有两种方法:1.可以指定长度值,比如 3px或 1em;2.使用 3个预设值,它们分别是 thin(细)、medium(普通,默认值)和 thick(粗)。所以,我们可以这样设置边框的宽度:.wid{border-style: solid; border-width: 5px;}或者:
.wid{border-style: solid; border-width: thick;}注释:CSS没有定义 3个关键字的具体宽度,所以一个用户代理可能把 thin、medium和 thick分别设置为等于 5px、3px和 2px,而另一个用户代理则分别设置为 3px、2px和 1px。--------------------------------------------------------------------------------定义单边宽度您也可以通过下列属性分别设置边框各边的宽度:1. border-top-width2. border-right-width3. border-bottom-width4. border-left-width所以可以这样定义:
.ya{border-style: solid;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 15px;}--------------------------------------------------------------------------------为什么没有边框?在前面的例子中,您已经看到,如果希望显示某种边框,就必须设置边框样式,比如 solid或 outset。那么如果忘记设置 border-style属性会出现什么情况呢?h1{border-width: 20px;}尽管边框的宽度是 20px,但是在没有定义border-style属性的情况下,无论设置了宽度为多少,会自动将宽度设置为0。
提示:这一点非常重要。事实上,因为忘记声明边框样式是一个初学者常犯的错误。--------------------------------------------------------------------------------边框的颜色设置边框颜色非常简单。CSS使用border-color属性来控制边框颜色,它一次最多可以接受4个颜色值。您可以使用任何类型的颜色值,包括类似命名颜色(red),RGB,十六进制:.col{
border-style: solid;
border-color: red;}提示:如果没有为边框声明颜色,默认情况下它将与元素的文本颜色相同。另外,如果元素没有任何文本,则继承父元素的文本颜色,以此类推。--------------------------------------------------------------------------------定义单边颜色还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:1. border-top-color2. border-right-color3. border-bottom-color4. border-left-color要指定实线黑色边框,而右边框为实线红色,可以这样指定:.bla{
border-style: solid;
border-style属性有几种(分别是)可否编一小段
border-style属性可设置四边的样式,可以有1到4种样式
举例
table{border-style: dotted}
all four borders will be dotted
四条边都为打点型
table{border-style: dotted dashed}
top and bottom border will be dotted, left an right border will be dashed
上下边为打点型的,左右为粉碎型
table{border-style: dotted dashed solid}
top border will be dotted, left and right border will be dashed, bottom border will be solid
上边为打点型,左右为粉碎型边框,下边框为线型
table{border-style: dotted dashed solid double}
top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double
上边为打点型,右边为粉碎型,下边为线型,左边为双线型
可用值
值描述
none Defines no border
无边框
hidden The same as"none", except in border conflict resolution for table elements
除了在table元素的边框解析上有冲突外基本和"none"一样
dotted Defines a dotted border. Renders as solid in most browsers
打点边框,在大多数浏览器中会变为线条
dashed Defines a dashed border. Renders as solid in most browsers
断裂边框,在大多数浏览器下也会变为线条(在IE里dotted和dashed基本无区别,FF浏览器有所不同)
solid Defines a solid border
线条边框
double Defines two borders. The width of the two borders are the same as the border-width value
双线边框。两线的宽度和border-width值一样
groove Defines a 3D grooved border. The effect depends on the border-color value
3D沟槽边框。效果依赖于border-color的值
ridge Defines a 3D ridged border. The effect depends on the border-color value
3D脊状边框。效果依赖于border-color的值
inset Defines a 3D inset border. The effect depends on the border-color value
3D嵌入边框。效果依赖于border-color的值
outset Defines a 3D outset border. The effect depends on the border-color value
3D突出边框。效果依赖于border-color的值
好了,关于border-style和border-style属性有几种(分别是)可否编一小段的问题到这里结束啦,希望可以解决您的问题哈!