首页
学习
活动
专区
工具
TVP
发布

css3 Border属性

css3中关于Border属性一共有三个:圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性...的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴再X轴,具体看下面: border-top-left-radius...属性应用 border-color: /*其中可以上一个值,也可以是多个值,具体我在这里不多说了,大家来时用到的也特别多*/ /*我们可以分别给各边上色*/ border-top-color...:  /*给左框上色*/  2、css3的border-color属性 首先css3的border-color属性现在只有Firefox3.0+浏览器支持, 所以css3的border-color...属性只有一种写法: -moz-border-top-colors: red blue white white black; -moz-border-right-colors: red blue white

51420
您找到你想要的搜索结果了吗?
是的
没有找到

【HTML】HTML 表格 ① ( 表格标签 | 行标签 | 单元格标签 | table 表格属性 | border 属性 | align 属性 | width 属性 | height 属性 )

文章目录 一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 ) 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 ) 一、...( border 属性 | align 属性 | width 属性 | height 属性 ) ---- table 表格属性 : border 属性 : 属性值 为 像素值 ; 设置边框 , 默认...0 像素 无边框 ; cellspacing 属性 : 属性值 为 像素值 ; 设置 单元格边框 之间的 间距 , 默认 2 像素 ; cellpadding 属性 : 属性值 为 像素值 ; 设置 单元格边框...与 单元格内容 之间的 间距 , 默认 1 像素 ; width 属性 : 属性值 为 像素值 ; 设置 表格宽度 ; height 属性 : 属性值 为 像素值 ; 设置 表格高度 ; align...-- 整个表格内容 --> <table border="1" width="500" height="200" align="center" cellpadding="10" cellspacing

3.3K10

html外边距如何归零,盒子模型的overflow属性border属性,padding与margin属性

html外边距如何归零,盒子模型的overflow属性border属性,padding与margin属性...+padding+border+margin 用一个实例在具体看一下,如下图所示: ㈡overflow属性 *当内容溢出盒子框的时候,overflow属性取值 ⑴hidden:超出部分不可见 ⑵scroll...:显示滚动条 ⑶auto:如有超出部分,显示滚动条(浏览器自动判断) ㈢border属性border-width:px(像素),thin(细),medium(中等),thick(粗) ⑵border-style...:dashed(一个个横线组成),dotted(点组成),solid(实线),double(双实线) ⑶border-color:颜色 ⑷border:顺序:width,style,color 用代码显示具体如下...; ⑸用border属性作出水平分割线 ㈣padding与margin属性 1.对浏览器默认的设置清零,采取全局声明 注意:属性的取值,只有当它取值为零的时候,才可以省略它的单位,其他情况是不可以的

1.2K20

从box-sizing:border-box属性入手,来了解盒模型

从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。...为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来将框模型更改成这个新的模型。...注意:回顾一下,框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和,这就是造成上述背景下,样式不好调整的原因。  ...(2)运用box-sizing:border-box属性下,框模型的变化 即width=content+padding+border(此时,当div的宽度为50%时,而border和padding为px...,padding,margin采用的是px尺寸,所有外层的盒子运用了box-sizing:border-box;属性来改变盒子的结构,从而实现需求。

1.5K20

从box-sizing:border-box属性入手,来了解盒模型

从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。...为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来将框模型更改成这个新的模型。...注意:回顾一下,框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和,这就是造成上述背景下,样式不好调整的原因。...(2)运用box-sizing:border-box属性下,框模型的变化 即width=content+padding+border(此时,当div的宽度为50%时,而border和padding为px...,padding,margin采用的是px尺寸,所有外层的盒子运用了box-sizing:border-box;属性来改变盒子的结构,从而实现需求。

1.1K10

【CSS】设置 border 长度

场景举例 如何实现 在线课程 字体下方的 短横线 样式效果 思考过程 1.常规方案 看到这样的样式效果,大多数人首先想到的一定是 border-bottom 吧,但是真正写在 css 中,你会发现,...效果是这样的 实现了,却又好像没实现,无法设置长度,那么下面我们试着换一种思路去实现这个效果 2.优化方案 我们不要把这个短横线看做 border ,使用 伪元素 实现,可以随意更改大小、宽度、长度等...在元素的内容之前或之后插入内容等 selector::pseudo-element { property: value; } 代码实现 .box h1::after { /* 必须设置 content 属性才能生效...*/ content: ''; /* border 宽度 */ width: 1000px; /* border 高度 */ height: 2px;...属性详解

2.6K20

10.7 border-width边框粗细:outline与border有什么不同?

border-width边框粗细:outline与border有什么不同? border-width 属性可以设置盒子模型的边框宽度。 为什么线的粗细叫宽度?...border-style边框样式 border-style 是一个 CSS 简写属性,用来设定元素所有边框的样式。 有以下取值: none 和关键字 hidden 类似,不显示边框。...:solid dotted dashed double; border属性简写 在了解了border-width与border-style以后,接下来就可以使用border这个简写属性了。...语法: || || 用一个,两个或三个值来指定border属性。 值的顺序无关紧要 。...移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有

2.3K30
领券