border属性顺序,border属性值有哪些

http://www.itjxue.com  2023-01-23 08:47  来源:未知  点击次数: 

border-radius属性是什么?

border-radius圆角边框是CSS3的新属性,以前网页设计开发中要实现元素的圆角边框,通常是用背景图片来实现的。

它是CSS3的新属性,兼容IE9+,Firefox 4+、Chrome、Safari 5+ 以及 Opera浏览器,对于一些较低版本的浏览器,我们可以添加相应的浏览器前缀来兼容。

border-radius可以同时设置1到4个值,(类似于margin与padding的值得设定)。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。

border-color属性为什么要放在border后面

border属性有三个子属性:线宽

线型

颜色。所以你列出的代码里,就是按照这个顺序定义的。

定义border的时候,可以直接用border属性,也可以分别用border-width,border-style,border-color定义。如果用border定义的话,就要把三个子属性的值全部写出,而且中间用空格分隔,不能用其他的字符。

请问HTML语言中bordor属性怎么用?

1.border就是边框的意思,它定义的是块级元素(有这个属性display:block),元素的边框 (border) 是围绕元素内容和内边距的一条或多条线;

2.边框的属性:有宽度(width),样式(style),颜色(color),如果一起定义可以这样;在css中,img{ border:5px solid red };定义所有图片的样式。

3.边框还可以单独定义,按上右下左 (top-right-bottom-left )的顺序;如,p.aside {border-style: solid dotted dashed double;}这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。

1)如果,只有3个规则,如p.aside {border-style: solid dotted double;}表示,上、左右、下;2)如果,只有2个规则,如p.aside {border-style: solid double;}表示,上下、左右。

3)1个规则,就不用说了,表示四个方向都遵守这个规则。

另外,还可以这样:p {

border-style: solid;

border-top-width: 15px;

border-right-width: 5px;

border-bottom-width: 15px;

border-left-width: 5px;

}

4.在css文件(以.css后缀)中,如a.css。一,定义全部元素用通配符"*"号:如,*{padding:0px;margin:0px} 二,定义标签元素(tagname)直接写,如p{规则;}、div{规则;}等;三,定义类元素(class)用".",如html中有p class="aside"abc/p,css文件中用.aside{规则}定义样式;四,定义id用"#",如html中有p id="aside"abc/p,css文件中用#aside{规则}定义样式;至于id与class的区别,就不说了。

5.border的详解,在这:

对了,引用css用link。

【css】边框border的属性和使用方法

顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用border属性。

边框样式border-style必须写!否则其它属性全部失效。

边框的样式:

border后面可跟多个值,中间用空格分离,含义如下:

注意顺序, 边框样式不可省略 ,颜色和宽度可以省略,会显示默认的效果。

——以上规律在padding和margin一样适用。

边框样式border-style必须设置

如果我们的四条边框属性都是一样的,那么统一设置就可以啦,注意边框类型不可省略。

首先我们放置一个宽高为200px的粉色盒子。

接下来我们为它加上一条宽度为10px,样式为实线,颜色为红色的边框。

我们可以看到,添加边框的时候,是在盒子外面套一圈边框,而不是加在里面,在Chrome浏览器中点击右键检查,可以看到div的大小变成了220x220。

套在外面的边框的宽度是会加进盒子尺寸的(上下左右各增加了10px),如果我们想盒子保持大小不变,要对div本身的width和height进行减小,在这个样例中,通过计算可得,减少到180px即可保持大小不变。

当我们使用点状、虚线等边框样式时,多出来的缝隙,会使用元素本身的 背景颜色 填充。

点和虚线的具体样式,不同浏览器中可能会不一样。

我们为刚刚的盒子设置上边框为红色,左边框为绿色,效果如下图所示:

我们会发现在两条边框交界处的小方块,通过一条对角线分隔,上边框和左边框各占一半。当边框不一样宽时,同样也是用对角线把交界处的小长方形一分为二,如下图所示:

当被添加边框的元素宽度为0,不设置高度(高度默认是0)的情况下,我们可以巧妙利用 边框组合 和 transparent(透明) 绘制三角形,可以体验下哦。

三角形1-css:

三角形2-css:

多彩三角形-css:

绘制梯形只要对应添加宽度或者高度就可以啦

梯形1-css:

梯形2-css:

border属性有几种?

boeder边框设置:

边框样式:border-style: ;

边框颜色:border-color: ;

边框宽度:border-width: ;

对每个边框设置:border-bottom/top/left/right-color/style:

简写:border: 5px solid red;

border圆角:

border-radius:?10px?10px?10px?10px/10px?10px?10px?10px;(如果是八个值,其设置顺序如下图)

设置某一个角:

border-top-left-radius:?10px;

border-bottom-right-radius:?20px;

(责任编辑:IT教学网)

更多

推荐Flash actionscript文章