精华内容
下载资源
问答
  • css中border属性的特殊用法(实现特殊形状)-包含代码示例
  • 我看到一个CSS文件这样写: ... background: transparent; border: 0; margin: 0;...可是我看书上说background后面要写背景颜色 | ...border后面也要写几个属性的值,为什么这里指写一个?如果写一个,它代表是哪个
  • 在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可。 border:none;与border:0;的区别体现有两点:一是理论上的性能差异;二是浏览器兼容性的差异。 1...

    概论

    在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可。

    border:none;与border:0;的区别体现有两点:一是理论上的性能差异;二是浏览器兼容性的差异。

    1.性能差异

    【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
    【border:none;】把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

    2.兼容性差异

    兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。

    【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在,如下例

    【border:0;】当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏

    总结:

    1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与 visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能 说是理论上。

    2. 如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可

    总结

    对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。

    展开全文
  • 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确的(有待考究);在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头。幸运的是,我们能放下PS图象处理软件了。基础你...

    7d9761b3a084825cfdef6f10d9798588.png

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西!

    不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确的(有待考究);在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头。幸运的是,我们能放下PS图象处理软件了。

    基础

    你可能很熟悉边的最基本用法。

    border: 1px solid black;

    上面的代码将给元素应用1px的边。即简洁又简单;但我们也可以稍作修改。

    border-width: thick;

    border-style: solid;

    border-color: black;

    除了指定具体的边框宽度值,也可以使用这三个关键词:thin,medium 和 thick。

    22132ddd60f566030a89025de8598563.png

    虽然乍看起来单个属性的方式没必要,但有极少数的情况下,当它是有利的,例如当你需要在特定的事件发生时更新边的部分属性。

    也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。

    box {

    border: 1px solid red;

    }

    .box:hover {

    border: 1px solid green;

    }

    一个更优雅的和简洁(DRY,don't repeat yourself)的做法是只更新边的颜色属性。

    .box {

    border: 1px solid red;

    }

    .box:hover {

    border-color: green;

    }

    此外,一会你会发现,这种单个属性的方式有助于通过CSS创建自定义的形状。

    圆角

    border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。

    为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    然而,今天我们不关心前缀,只简单坚持官方形式:border-radius。

    f32ed1e9184d6e8add7b3970970fbc3e.png

    如你所料,我们可以为每个角指定不同的值。

    656d96bc0f91d85a445796521a106959.png

    border-top-left-radius: 20px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 30px;

    border-bottom-left-radius: 0;

    在上面的代码中,设置border-top-right-radius和border-bottom-left-radius为零是多余的,除非该元素有继承的值。

    就像margin和padding一样,如果需要的话,这些设置可以合并为一个单一的属性。

    /* 左上角, 右上角, 右下角, 左下角 */border-radius: 20px 0 30px 0;

    举个例子(网页设计师经常这样做),可以用CSS的border - radius属性模拟柠檬的形状,如下:

    .lemon {

    width: 200px; height: 200px;

    background: #F5F240;

    border: 1px solid #F0D900;

    border-radius: 10px 150px 30px 150px;

    }

    343a7d129dac8dfa743d97e5ac3b186a.png

    扩展知识

    许多设计师一直用的是目前为止在本章列出的知识,然而,有一些方法我们可以进一步扩展!

    多个边

    当给一个元素应用多个边的时候,有各种各样的技术可以参考。

    边的样式

    solid,dashed和dotted是最常用的border-style属性值,还有其他几个我们可以使用的值,包括groove和ridge。

    border: 20px groove #e3e3e3;

    或者写成单个属性形式:

    border-color: #e3e3e3;

    border-width: 20px;

    border-style: groove;

    9100595c5f54ecb3521d130956b22377.png

    虽然这看起来不错,但ridge或groove效果并不是真正的多个边。

    轮廓

    创建两条边的最流行的方式是利用outline属性。

    .box {

    border: 5px solid #292929;

    outline: 5px solid #e3e3e3;

    }

    0776e3a08f38bf80413e2cc5be59356a.png

    这个方法表现的非常棒,然而,最多两个边界。您应该需要创建一个层,实现渐变梯度效果,需要一种不同的方法。

    伪元素

    当轮廓技术无法满足要求时,另一种方法是利用::before和:after伪元素,并利用生成内容产生额外的边。

    .box {

    width: 200px; height: 200px;

    background: #e3e3e3;

    position: relative;

    border: 10px solid green;

    }

    /* 创建和容器宽度相同的两个容器 */.box:after, .box:before {

    content: '';

    position: absolute;

    top: 0; left: 0; bottom: 0; right: 0;

    }

    .box:after {

    border: 5px solid red;

    outline: 5px solid yellow;

    }

    .box:before {

    border: 10px solid blue;

    }

    853be89283c5fb3bb43e13356e649330.png

    这也许不是最优雅的方法,但它确实起作用了。需要注意的地方是很容易混淆边界颜色的顺序。确保正确的序列。

    对象阴影

    创建无限数量的边界更酷的方法是利用CSS3的box-shadow属性。

    .box {

    border: 5px solid red;

    box-shadow:

    0 0 0 5px green,

    0 0 0 10px yellow,

    0 0 0 15px orange;

    }

    1798e5638ee303867e523f787c0795e6.png

    在这种情况下,我们灵活使用box-shadow属性,这种方法,并不是css规范的本意。

    通过设置x,y,和模糊属性为0,我们可以使用多个值在需要的位置创建实线边界。因为box-shadow属性可以叠加,通过逗号分割,可以使用无限的值。

    这种技术能很好的运行。在不能识别box-shadow属性的老式浏览器中,这只会呈现单一红色5 px边界。谨记:在所有浏览器里实现相同的设计是不必要的。为大部分现代浏览器书写你的CSS,然后为老式浏览器提供可行的回退版本。

    自定义角度

    除了给border-radius传递一个值外,我们也可以提供两个——由/分隔——为水平和垂直半径指定不同的值。

    例如……

    border-radius: 50px / 100px; /* 水平半径, 垂直半径 */

    ……相当于:

    border-top-left-radius: 50px 100px;

    border-top-right-radius: 50px 100px;

    border-bottom-right-radius: 50px 100px;

    border-bottom-left-radius: 50px 100px;

    这种技术是特别有用,当你需要模拟一个平缓的,冗长的曲线,而不是一个通用的圆角。例如,下面的代码允许我们稍微变形一个正方形形状,模拟出更多卷纸一样的效果。

    .box {

    width: 200px; height: 200px;

    background: #666;

    border-top-left-radius: 15em 1em;

    border-bottom-right-radius: 15em 1em;

    }

    77f9dfd408ffe6d44716ce10833fae56.png

    CSS形状

    也许最干脆的是直接使用边界,给宽和高为零的元素巧妙的应用边界。令人困惑,是吗?让我们看看一个演示。

    在接下来的几个例子,假设以下标记……

    ……和基本样式如下:

    .box {

    width: 200px;

    height: 200px;

    background: black;

    }

    最常用的例子是如何使用CSS形状创建一个箭头。

    关键是了解如何用CSS生成箭头,通过为每个边设置不同的颜色,并且将容器的宽和高都减为零。

    假设一个有arrow类的p作为容器:

    .arrow {

    width: 0; height: 0;

    border-top: 100px solid red;

    border-right: 100px solid green;

    border-bottom: 100px solid blue;

    border-left: 100px solid yellow;

    }

    在本章的开始,更清洁的语法是不使用复合语法:

    .arrow {

    width: 0; height: 0;

    border: 100px solid;

    border-top-color: red;

    border-right-color: green;

    border-bottom-color: blue;

    border-left-color: yellow;

    }

    我们甚至可以进一步精简,通过合并颜色值。

    .arrow {

    width: 0; height: 0;

    border: 100px solid;

    border-color: red green blue yellow;

    }

    4ba5945abed9608b03d1e46cb387c0b2.png

    很有趣,不是吗?不过,当我们后退一步时更有趣。现在,如果我们将除了蓝边之外的所有的border-colors设置为透明的将会怎样?

    .arrow {

    width: 0; height: 0;

    border: 100px solid;

    border-bottom-color: blue;

    }

    342734902106d7dfb32740753f7db482.png

    太棒了!但用p创建一个箭头似乎不太符合语义化。然而,通过after或before等相关伪元素可以用来创建箭头。

    创建一个气泡

    创建一个100%CSS的气泡,我们从下面的标记考试。

    Hi there!

    接下来,应用一些基本样式。

    .speech-bubble {

    position: relative;

    background-color: #292929;

    width: 200px;

    height: 150px;

    line-height: 150px; /* 垂直居中 */

    color: white;

    text-align: center;

    }

    dc1afb902691ee8b7a1d57c49ecd7263.png

    箭头将通过after伪元素实现。

    .speech-bubble:after {

    content: '';

    }

    :before和:after伪元素可以用来在元素内容之前或之后插入生成内容。

    接下来,只是简单复制箭头,并定位到适当的位置。我们开始通过绝对定位的内容,重置宽度和高度,并应用边界颜色。

    .speech-bubble:after {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border: 10px solid;

    border-color: red green blue yellow;

    }

    785628d99d3f79e67ddcc8b8c0f30ad9.png

    因为我们知道我们想要向下的箭头,上面的图片表明,除了红色(或上)边境其他的都应该被省略,或者设置为透明。

    .speech-bubble:after {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border: 10px solid;

    border-top-color: red;

    }

    f110e5a57c2ae2516ccb685d45d068a7.png

    当创建CSS形状是,因为我们不能使用width属性来指定箭头的宽度,而是应该使用border-width属性。在这种情况下,箭头应该更大点;所以border-width可以增加到15 px。我们将箭头定位到容器的底部居中,通过利用top和left属性。

    .speech-bubble:after {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border: 15px solid;

    border-top-color: red;

    top: 100%;

    left: 50%;

    }

    39a16efe181f066a1f4bc27b211b434c.png

    到这里就差不多了;最后一个步骤是更新箭头的颜色和容器的背景颜色相同。定位也需要修改,根据边界的宽度(15 px)。当我们在这里,我们还将应用一个微妙border-radius属性来使容器更像气泡。

    .speech-bubble { /* … 其他样式 */

    border-radius: 10px;

    }

    .speech-bubble:after {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border: 15px solid;

    border-top-color: #292929;

    top: 100%;

    left: 50%;

    margin-left: -15px; /* 调整边框宽度 */}

    6c9cadf95e95ab0d35128ebbf7da83e1.png

    不错,不是吗?将这代码抽象为几个可重用的类,好应用到你将来的项目。

    {:;:;:;:;:; :;:;:;:;

    }{:;:;:;:;:;

    }

    {:;:;:;:;

    }{:;:;:;:;

    }{:;:;:;:;

    }{:;:;:;:;

    }

    a91188331e8a091276b668d542aedf29.png

    补充:更好的垂直居中

    使用line-height实现垂直居中的一个缺点是仅限于一行。当文本需要两行或两行以上时,每一行的高度将会太大。一个聪明的解决办法是设置气泡的display属性为table,和包装段落文本的display为table-cell。这就允许我们将文本设为垂直居中。

    Text goes here.

    接下来,修改CSS。

    .speech-bubble { /* 其他样式 */

    display: table;

    }

    .speech-bubble p {

    display: table-cell;

    vertical-align: middle;

    }

    faa3196faa261912a021af1085e52262.png

    如果引用display: table 带来可怕的表格布局的老式回忆,别担心。这些属性是指显示一个元素的样式。

    我们不局限于三角形;CSS能产生各种各样的形状,甚至心和生物危害标志!

    fb8e7e7dc954a4197113f897726b63ab.png

    .biohazard {

    width: 0; height: 0;

    border: 60px solid;

    border-radius: 50%;

    border-top-color: black;

    border-bottom-color: black;

    border-left-color: yellow;

    border-right-color: yellow;

    }

    总结

    虽然最简单的border:1px solid black语法很有帮助,如果我们聪明,我们可以创建各种有益的效果,图标和形状。谁会想到边界可以如此强大?关键是要记住常见的形状或对话框的样式应该只被创建一次,然后抽象出来实用的类为将来使用。

    更多CSS:Border属性 相关文章请关注PHP中文网!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!

    展开全文
  • 1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色; 2:属性使用细说: 2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四...

    1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色;

    2:属性使用细说:

    2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四条边都一一赋予

    例子:border:1px solid red;/*设置边框大小为1px的红色实线*/

    参数说明:

    第一个属性为设置边框大小:px为单位;

    第二个属性为设置边框类型:除了可以设置实线外,还可以设置其他,如虚线,或者无,具体可以查看

    W3CSchool关于border属性说明

    第三个属性为设置边框颜色:除了个别特定的颜色,red,black,blue,yellow等等外,一般用#000000到#FFFFFF之间的调整(三原色原理)

     

    2.2:第二种设置border的方式,元素是矩形的,有四条边,但这种方式设置只针对某一条边进行属性设置

    以下是对上,下,左,右边框的属性设置例子,简介明了,这里不再细说。

    1px黑色虚线上边框
    border-top:1px dashed #000

    1px黑色实线下边框
    border-bottom:1px solid #000

    1px黑色虚线左边框
    border-left:1px dashed #000

    1px黑色实线右边框
    border-right:1px solid #000

     

    展开全文
  • CSS 边框 border属性

    千次阅读 2018-02-16 22:12:27
    边框在CSS1,就支持为元素添加边框,并可以设置边框的样式、颜色、及粗细。不过,当时的边框太过单一,只支持简单的线条...线条边框使用 border属性定义,图像边框使用 border-image 属性来定义,圆角边框使用 bo...

    为元素定义线条边框,最简单的办法就是使用 border属性。border为复合属性,语法格式为:

    1. border: <border-style> || <border-width> || < border-color>

    也就是说,border属性可以分解为边框样式(border-style)、边框宽度(border-width)、边框颜色(border-color)这 3 个属性,接下来分别进行介绍。

    border-style

    border-style属性是一个非常重要的边框属性,如果没有显式定义 border-style属性,或把 border-style属性设置为 none,元素将没有边框,并忽略 border-color属性 和 border-width属性。

    border-style属性的取值为预定义关键字,CSS内置了 10 种不同的边框样式,每个样式都由一个预定义关键字来定义。

    表 4‑1 border-style属性的取值及含义
    属性值样式说明
    none无边框,不占据页面空间,同时忽略 border-color属性和 border-width属性
    hidden隐藏边框,它有边框,只是不可见
    dotted点状线
    dashed虚线
    solid实线
    double双线,两条单线与其间隔的和等于指定的 border-width属性的值
    groove3D凹槽
    ridge3D凸槽
    inset3D凹边
    outset3D凸边

    如果一个元素的边框、背景、内容发生重叠,则边框绘制在元素的背景之上,内容之下。这 10 种不同的边框样式,在浏览器中的渲染效果如图 4‑4 所示:

    不同边框的样式图4-4 不同边框的样式

    如果border-width属性设置为0,则忽略border-style属性。可以为给定的边框定义多个样式。如,以下规则定义的上边框为点状线、右边框为单实线、下边框为双实线、左边框为虚线:

    1. border-style: dotted solid double dashed;

    可以看出,border-style属性的 4个参数值也采用 top-right-bottom-left 的顺序,其作用规则与 padding 相同。

    有时候,你可能只想为元素的一边设置边框样式,而不是同时设置所有的 4 个边。这就要用到单边边框的样式属性,按上、右、下、左的顺序,对应的属性依次为border-top-style、border-right-style、border-bottom-style、border-left-style。

    border-width

    border-width属性用来设置边框的粗细程度,可以使用长度值或预定义关键字 thin | medium | thick,默认值为 medium。长度值表示具体的数值,如2px 或 0.5em,不允许负值。

    如果未显式声明 border-width属性,则边框的宽度或者为零(使用reset css时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)。

    如果 border-style属性的值为 none,则无论是否显式定义边框的宽度,其宽度都会被自动设置为 0。由于 border-style属性的默认值是 none,因此,如果希望边框出现,就必须显式声明一个边框样式。

    border-width属性需要 4 个参数值,也采用 top-right-bottom-left 的顺序。如:

    1. border-width: 1px 2px 3px 4px;

    上述规则就表示上边框的宽度为 1px、右边框的宽度为 2px、下边框的宽度为 3px、左边框的宽度为 4px。

    也可以使用单边属性,按上、右、下、左的顺序,border-width对应的属性依次为border- top-width、border- right-width、border-bottom-width、border-left-width。

    border-color

    border-color属性用来设置边框的颜色,其值可以是任意合法CSS的颜色,如预定义的颜色名、十六进制数值、RGB、RGBA、HSL、HSLA。在CSS2中, 还引入了边框颜色值 transparent,这个值使边框透明,用于创建有宽度但不可见的边框。

    如果 border-width属性的值等于 0 或 border-style属性的值为 none,则忽略该属性。border-color属性需要 4 个参数值,也采用 top-right-bottom-left 的顺序。如:

    1. border-color: red black green blue;

    上述规则就表示上边框的颜色为红色、右边框的样式为黑色、下边框的样式为绿色、左边框的样式为蓝色。

    边框颜色按上、右、下、左的顺序,border-color属性对应的独立属性依次为 border-top-color、border-right-color、border-bottom-color、border-left-color。

    默认情况下,一个元素的边框颜色为元素内容的前景色。因此,如果没有显式声明边框颜色,边框的颜色将与元素的文本颜色相同。如果该元素不包含任何文本,如只包含图像,那么它的边框颜色,就是其父元素的文本颜色(因为 color 属性具有继承性)。  

    说明:单边复合属性

    在定义单边属性时,如果每次都要使用诸如 border-top-width、border-top-color 这样的属性,就会带来诸多不便。

    于是,CSS也专门为单边定义了复合属性,按上、右、下、左的顺序,对应的单边属性依次为 border-top、border- right、border-bottom、border-left,它们的语法相同,格式如下:

    1. border-top: <border-style> || <border-width> || < border-color>

    有了这些属性,就可以创建出一些复杂的边框。如,以下规则为容器的 4 个边创建了 4 种不同的边框:

    1. div {
    2. width: 200px;
    3. height: 60px;
    4. border-top: 10px dotted #006dcc;
    5. border-right: 10px solid #da4f49;
    6. border-bottom: 10px dashed #5bb75b;
    7. border-left: 10px double #faa732;
    8. }

    上述代码的运行结果如图 4 所示:

    图4

    实际上,在声明单边属性时,具体值的顺序并不重要,浏览器可以根据值的类型自动识别,并应用到相应的属性。所以,以下三个规则会得到相同的边框效果:

    1. div { border-top: 10px dotted #006dcc; }
    2. div { border-top: dotted 10px #006dcc; }
    3. div { border-top: #006dcc dotted 10px; }

    并且,如果希望某个值使用默认值,也可以省略其值。如,以下规则就表示希望边框使用与容器中的文本相同的颜色:

    1. div { border-top: 10px dotted; }

    需要注意的是,这些单边属性只能应用到一个特定的边,因此,只需声明一个宽度值、一个颜色值和一个边框样式值。否则,将导致整个声明无效。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • CSS边框border属性

    2019-01-29 16:26:57
    在 HTML ,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边...
  • 如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式,如虚线、实线或点划线等等。...
  • 可能的值:像素可能的值:solid(直线),dashed(虚线),dotted(点线)可能的值:red,#f00,#ff0000,rgb(255,0,0),transparentborder-left 属性设置左边框border-right 属性设置右边框border-top 属性设置上边框border-...
  • border基础回顾border 顾名思义就是边框的意思,在 CSS ,你可以透过 border 的语法来对边框做许多样化的设计变化,例如设定边框的宽度、样式、颜色等等,也可以隐藏边框,原则上 CSS 对于 border 的设计不只局限...
  • CSSborder属性

    2019-02-24 22:15:38
    用css实现一个三角形 实心三角形 带边框的三角形 空心三角形 html与带边框的三角形的html一样,不同点为css中对应的颜色#e63c3c改为#ffffff即可
  • css3 Border属性

    2013-01-07 14:25:06
    css3关于Border属性一共有三个:圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性。 一、圆角border-radius 1、语法 border-radius:none|<...
  • 重温CSSBorder属性

    2015-11-03 15:10:00
    重温CSSBorder属性 边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是...
  • border属性介绍 border属性设置元素边框。 边框3个要素如:粗细、线型、颜色。 边框线型属性值说明表如:      属性指 描述 none 定义无边框。 hidden 与 none 相同。不过应用于表时除外,对于表,...
  • 边框属性/*.box{height: 100px;width: 100px;background-color: #3385ff;border-top:1px double #000;border-right:2px dashed red;border-bottom:3px outset white;border-left: 4px solid #000;}*/.box{height: 0...
  • CSS中border属性

    2019-07-11 09:32:54
    border: 1px solid blue; 第一个值:border-width:边框的宽度; 第二个值:border-style:边框的样式; 第三个值:border-color:边框颜色;(transparent:透明色) 分开写: border-width: 1px; border-color : ...
  • 主要介绍了详解CSSborder边框属性及其在CSS3的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3的图片边框及边框渐变,需要的朋友可以参考下
  • css中,我们可以用边框制作一个三角形 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &...
  • CSS中border的所有样式属性 1、solid:实线 使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px #000;的效果是一样的 效果图如下: 2、dotted:点划线 使用方法:border:dotted 1px #...
  • 在HTML和CSS中创建边框并不是什么新东西; 从一开始我们就可以添加边框。 您可能已经熟悉实线边框,虚线边框,虚线边框等。 但是,有了新的CSS3 border-image属性 ,在HTML元素上创建边框变得更加先进。 好吧,...
  • border 边框属性可以说是我们在网页布局最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子: 在...
  • css3关于Border属性一共有三个:圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性。一、圆角border-radius1、语法border-radius:none|{1,4}[/{1,4...
  • 上一节我们介绍了CSS top属性的用法,那么这节关于CSS border-top属性用法学习起来就会轻松一些,border-top 简写属性把上边框的所有属性设置到一个声明。 本文向大家描述一下CSS border-top属性的用法,border-...
  • border属性1.border-width:不支持百分比,支持关键字,thin(1px),medium(默认值,3px,默认值是3px的原因是只有当border是3px及以上时,border-style才有效果),thick(5px)2.border-style:有不同值,下面分析...
  • 初学css的朋友可能觉得 border属性只是简单的绘制边框。其实, border是控制对象的边框边线宽度、颜色、虚线、实线等样式。可以对单个边框进行控制,也可以控制所有的边框。使用border属性可以制作更多的效果。在 ...
  • 图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box),设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容...
  • 本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解答...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,902
精华内容 1,560
关键字:

css中border属性