CSS属性之border

2018-06-24 01:00:08来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

css的border属性相信大家都不陌生了,就是给元素加个边框嘛,在不同的盒模型下,会给元素的宽高带来怎样的影响,相信大家也都很熟悉了,这里就不再赘述,只说说大家平时没有怎么留意的东西。

0.border-color与color

大家平时使用border属性的时候,通常应该是直接写border:1px solid #ccc; 类似于这个样子。

不过大家知不知道当不给border设置颜色的时候,它的颜色是怎样的呢?相信肯定会有很多人说,黑色的!

的确是黑色的,不过为什么是黑色?因为在没有给元素设置color属性的时候,元素color属性默认是黑色的,所以也就是说,在未设置border-color的时候,border-color=color

<div class="wrap">
  <div class="red">没有给border设置颜色</div>
</div>
* {margin:0; padding:0;}

.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
}
.red {
  width: 100px;
  height: 100px;
  color: red;
  border: 2px solid ;
}

1.border与图形

四个方向的border实际上是怎样组成的,相信肯定很多人都知道的,这里再写一写,只需要配合transparent(透明),就可以实现三角形等很多图形,大家可以自己尝试。

<div class="box"></div>
.box {
  position: absolute;
  border-top: 20px solid red;
  border-left: 20px solid blue;
  border-right: 20px solid green;
  border-bottom: 20px solid yellow;
}

2.border与等高布局

使用border实现左右两侧等高布局,需要配合margin-left负值

<ul class="list">
  <li class="item">
    <span class="left">左侧等高</span>
    这里是一些主要内容
  </li>
  <li class="item">
    <span class="left">左侧等高</span>
    这里是一些主要内容
  </li>
  <li class="item">
    <span class="left">左侧等高</span>
    这里是一些主要内容
  </li>
</ul>
* {margin:0; padding:0;}

.list {
  margin: 50px;
}
.item {
  width: 500px;
  list-style: none;
  border-left: 200px solid green;
  background-color: red;
}
.left {
  margin-left: -200px;
  margin-right: 200px;
}

 

文章参考:

 CSS深入理解之border

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Bootstrap Modal Bootbox 垂直居中/模态框居中

下一篇:HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚