精华内容
下载资源
问答
  • border属性

    2020-09-30 11:17:14
    border属性及其应用 border 简写属性在一个声明设置所有的边框属性。 border: width style color 可以按顺序设置如下属性: border-width 1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等) 2.或者...

    border属性及其应用

    border 简写属性在一个声明设置所有的边框属性。
    border: width style color
    可以按顺序设置如下属性:

    • border-width

    1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
    2.或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。

    • border-style

    1.none: 默认无边框
    2.dotted: 定义一个点线边框
    3.dashed: 定义一个虚线边框
    4.solid: 定义实线边框
    5.double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
    6.groove: 定义3D沟槽边框。效果取决于边框的颜色值
    7.ridge: 定义3D脊边框。效果取决于边框的颜色值
    8.inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
    9.outset: 定义一个3D突出边框。 效果取决于边框的颜色值

    • border-color

    name - 指定颜色的名称,如 “red”
    RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
    Hex - 指定16进制值, 如 “#ff0000”

    应用border属性绘制三角形
    原理:将边框设置足够宽就会显示三角形。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width: 0px;
    				height: 0px;
    				border-bottom: 100px solid green;
    				border-top: 100px solid red;
    				border-left: 100px solid #0000FF;
    				border-right: 100px solid orangered;
    			}
    			p{
    				width: 0px;
    				height: 0px;
    				border-bottom: 100px solid green;
    				border-top: 100px solid red;
    				border-left: 100px solid #0000FF;
    				border-right: 100px solid orangered;
    				border-color: red transparent transparent transparent;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    		<p></p>
    	</body>
    </html>
    
    

    在这里插入图片描述

    展开全文
  • border 属性

    2016-03-04 12:09:09
    p  { border: medium double rgb(250,0,255) } Some text
    <html>
    <head>
    <style type="text/css">

    {
    border: medium double rgb(250,0,255)
    }
    </style>
    </head>


    <body>
    <p>Some text</p>
    </body>


    </html>
    展开全文
  • Border属性

    2014-02-27 15:56:50
    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确的(有待考究...border: 1px solid bl

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

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

    基础

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

    border: 1px solid black;

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

    border-width: thick;
    border-style: solid;
    border-color: black;

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

    image

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

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

    复制代码
    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。

    image

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

    image
    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;
    }
    复制代码

     

    image

    扩展知识

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

    多个边

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

    边的样式

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

    border: 20px groove #e3e3e3;

    或者写成单个属性形式:

    border-color: #e3e3e3;
    border-width: 20px;
    border-style: groove;

     

    image

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

    轮廓

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

    .box {
       border: 5px solid #292929;
       outline: 5px solid #e3e3e3;
    }

     

    image

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

    伪元素

    当轮廓技术无法满足要求时,另一种方法是利用::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;
    }
    复制代码

     

    image

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

    对象阴影

    创建无限数量的边界更酷的方法是利用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;
    }
    复制代码
    image

    在这种情况下,我们灵活使用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;
     
    }
    复制代码
    image

    CSS形状

    也许最干脆的是直接使用边界,给宽和高为零的元素巧妙的应用边界。令人困惑,是吗?让我们看看一个演示。
    在接下来的几个例子,假设以下标记……

    <div class="box"></div>

    ……和基本样式如下:

    .box {
       width: 200px;
       height: 200px;
       background: black;
    }

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

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

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

    复制代码
    .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;
    }
    image

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

    .arrow {
      width: 0; height: 0;
     
      border: 100px solid;
      border-bottom-color: blue;
    }

     

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

    创建一个气泡

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

    <div class="speech-bubble">Hi there!</div>

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

    复制代码
    .speech-bubble {
        position: relative;
        background-color: #292929;
     
        width: 200px;
        height: 150px;
        line-height: 150px; /* 垂直居中 */
     
        color: white;
        text-align: center;
    }
    复制代码

     

    image

    箭头将通过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;
    }
    复制代码
    image
    因为我们知道我们想要向下的箭头,上面的图片表明,除了红色(或上)边境其他的都应该被省略,或者设置为透明。
    复制代码
    .speech-bubble:after {
      content: '';
      position: absolute;
     
      width: 0;
      height: 0;
     
      border: 10px solid;
      border-top-color: red;
    }
    复制代码
    image

    当创建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%;
    }
    复制代码
    image
    到这里就差不多了;最后一个步骤是更新箭头的颜色和容器的背景颜色相同。定位也需要修改,根据边界的宽度(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; /* 调整边框宽度 */
    }
    复制代码

     

    image

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

    复制代码
    /*
       对话气泡
       用法:使用.speech-bubble和.speech-bubble-DIRECTION类
       <div class="speech-bubble speech-bubble-top">Hi there</div>
    */
     
    .speech-bubble {
      position: relative;
      background-color: #292929;
     
      width: 200px;
      height: 150px;
      line-height: 150px; /* 垂直居中 */
     
      color: white;
      text-align: center;
      border-radius: 10px;
     
      font-family: sans-serif;
    }
     
    .speech-bubble:after {
      content: '';
      position: absolute;
     
      width: 0;
      height: 0;
     
      border: 15px solid;
    }
     
     
    /* 箭头的位置 */
     
    .speech-bubble-top:after {
      border-bottom-color: #292929;
     
      left: 50%;
      bottom: 100%;
      margin-left: -15px;  
    }
    .speech-bubble-right:after {
      border-left-color: #292929;
     
      left: 100%;
      top: 50%;
      margin-top: -15px;   
    }
     
    .speech-bubble-bottom:after {
      border-top-color: #292929;
     
      top: 100%;
      left: 50%;
      margin-left: -15px;  
    }
     
    .speech-bubble-left:after {
      border-right-color: #292929;
     
      top: 50%;
      right: 100%;
      margin-top: -15px;   
    }
    复制代码

     

    image

    补充:更好的垂直居中

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

    <div class="speech-bubble speech-bubble-top">
        <p>Text goes here.</p>
    </div>

    接下来,修改CSS。

    复制代码
    .speech-bubble {
     /* 其他样式 */
     
      display: table;
    }
     
    .speech-bubble p {
      display: table-cell;
      vertical-align: middle;
    }
    复制代码

     

    image
    如果引用display: table 带来可怕的表格布局的老式回忆,别担心。这些属性是指显示一个元素的样式。
    我们不局限于三角形;CSS能产生各种各样的形状,甚至心和生物危害标志!
    image
    复制代码
    .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 Refreshers: Borders

    Q群推荐

    CSS家园188275051,CSS开发者的天堂,欢迎有兴趣的同学加入

    JavaScript家园159973528,JavaScript开发者的天堂,欢迎有兴趣的同学加入

    转载请注明出处,原文地址:颜海镜的博客 http://yanhaijing.com
    展开全文
  • CSS border 属性

    2019-08-29 15:54:19
    最近写网页,用到了border属性 了解的不是很多,就整理了一下 border属性就是边框属性 实例 p{ border:5px soild #000 ; } 分三个点: border-width 指定边框的宽度 boder-style 指定边框的样式 border-color ...

    最近写网页,用到了border属性
    了解的不是很多,就整理了一下

    border属性就是边框属性

    实例

    p{
    	border:5px soild #000 ;
    }
    

    分三个点:

    1. border-width 指定边框的宽度
    2. boder-style 指定边框的样式
    3. border-color 指定边框的颜色
      还有从父级元素继承过来的inherit

    border-width

    可以设置一到四个值
    一个值:代表所有的边框;
    两个值:第一个代表上下边框,第二个代表左右边框;
    三个值:第一个上边框,第二个值是左右边框,第三个值是下边框;
    四个值:上 右 下 左

    属性值
    • thin:定义细的边框
    • medium:默认,定义中等的边框
    • thick:定义粗的边框
    • length:允许你自定义边框的宽度
    • inherit:规定应该从父级元素继承边框宽度

    border-style

    border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值

    一个值:代表所有的边框;
    两个值:第一个代表上下边框,第二个代表左右边框;
    三个值:第一个上边框,第二个值是左右边框,第三个值是下边框;
    四个值:上 右 下 左

    属性值
    • soild:实线
    • dotted:点状
    • double:双线
    • dashed:虚线
    • none:定义无边框
    • hidden:于none相同,应用表时除外,对于表,hidden用于解决边框冲突

    border-color

    border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

    一个值:代表所有的边框;
    两个值:第一个代表上下边框,第二个代表左右边框;
    三个值:第一个上边框,第二个值是左右边框,第三个值是下边框;
    四个值:上 右 下 左

    注意请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

    属性
    • color :在CSS颜色值查找颜色值的完整列表
    • transparent:边框颜色透明,这是默认值
    • inherit:从父级元素继承
    展开全文
  • CSS 边框 border属性

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

    2017-11-02 20:23:06
    用 CSS 绘制三角形,只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下,就会发现其中的技巧。下面,我们先看以下代码: HTML代码: ---------- CSS代码: .test{ width: 10px; height: 10px...
  • CSS的border属性的定义: Value: [ <border> || <border> || <‘border-top-color’> ] | inherit Initial: see individual properties Applies to: all elements Inherited: no Percentages: N/A Media: visual...
  • HTML DOM border 属性

    2017-05-11 21:17:50
    border 属性在一个声明中设置所有边框属性。 语法: Object.style.border=borderWidth borderStyle borderColor 值 描述 值 borderWidth 设置边框的宽度。 thinmediumthicklength ...
  • CSS边框border属性

    2019-01-29 16:26:57
    CSS border 属性允许你规定元素边框的样式、宽度和颜色。 CSS边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。 元素外边...
  • 对table的border属性和css border属性刚开始使用时有些混乱,都是对table的边框进行设置,那么有什么区别呢?写了段简短的table比较了下: DemensionValue 位置120 结果如下: 另一个...
  • HTML <table> border 属性

    千次阅读 2018-12-12 16:02:27
    所有主流浏览器都支持 border 属性。 定义和用法 border 属性规定表格单元周围是否显示边框。 值 "1" 指示应该显示边框,且表格不用于布局目的。 HTML 4.01 与 HTML5之间的差异 在 HTML5 中,border ...
  • CSS border 属性及用border画各种图形

    千次阅读 2016-08-28 10:58:10
    CSS border 属性 定义和用法 border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性border-widthborder-styleborder-color 如果不设置其中的某个值,也不会出问题,比如 border:solid ...
  • CSS border 属性 用于设置四个边框样式 直接看使用方法: .sjx:before{ content: ''; display: inline-block; width: 100px; height: 100px; background: #FFC; border-top: 80px solid #0F0; border-ri....
  • WPF border属性

    2012-08-10 11:03:00
    WPF border属性 2012-08-10 11:03 by swarb, ... 阅读, ... 评论, 收藏, 编辑 Border 是一个装饰的控件,此控件绘制一个边框、一个背景,在 Border 中只能有一个 子控件,但它的子控件是可以包含多个子...
  • CSS padding margin border属性详解 CSS padding margin border属性详解 padding margin border
  • 神奇的border属性

    2016-04-05 22:15:50
    这世界太疯狂,Border属性也搞模仿秀! 这里讨论的都是关于边框属性border的极致应用,这些应用虽说有些剑走偏门,但在一些特殊的场合,可能还是会用得上的,如果你对HTML代码有洁癖,有切肤之痛,并且认为冗余的...
  • css的padding属性和border属性,margin属性,background属性; css优先级: css三大特征: 层叠性,继承性,优先级; 层叠性: 多种样式的叠加;样式不冲突 不会层叠;如果样式冲突,遵循就近原则; 继承性: 资源...
  • CSS:不可思议的border属性

    千次阅读 2014-11-16 00:23:43
    译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了...
  • html表格间距和border属性

    千次阅读 2017-03-11 17:57:53
    表格和border属性 (组成): < td> 指表格数据(table data),即数据单元格的内容 表头使用 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本 (边框属性):如果不指定border属性,表格将...
  • 1:属性概括:CSS中border属性的使用,设置元素有边框,并设置边框的属性,包括边界大小,类型,颜色; 2:属性使用细说: 2.1:第一种设置border的方式,元素是矩形的,有四条边,而这种方式的设置后,会样式给四...
  • 认识border属性 我们可以通过boder属性来为元素设置边框;元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。值得注意的一点是:为元素设置边框...
  • border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。 ...
  • css border属性简写

    千次阅读 2014-08-05 15:27:38
    CSS的border属性的定义:  Value: [ || || ] | inherit  Initial: see individual properties  Applies to: all elements  Inherited: no  Percentages: N/A  Media: visual  Computed value: see ...
  • CSS解读之border属性

    千次阅读 2013-12-28 10:13:44
    之前刚学习CSS的时候,对于border的属性渲染结果的理解很想当然,一开始就自然而然的认为border属性就是给容器外边加上了四条直线,这种理解一直伴随我很长的时间,不过由于一般对于border属性的运用都很普通,因此...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,868
精华内容 6,747
关键字:

border属性