css学习（七）：边框、三角形、自适应正方形

最新推荐文章于 2024-05-14 11:13:25 发布

原创最新推荐文章于 2024-05-14 11:13:25 发布 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

css 同时被 2 个专栏收录

7 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文介绍了CSS中关于边框的样式，包括border-style、border-width和border-color，以及如何使用border-image创建复杂的边框效果。接着详细讲解了如何利用边框的特性创建三角形，通过控制边框宽度和颜色实现不同类型的三角形。最后，探讨了自适应正方形的多种实现方法，包括vw单位、padding-bottom、absolute定位以及伪元素的使用。

一、border：

border-style：solid/double；默认是none，不显示边框；（虽然不显示，但是如果有宽度，背景图片定位/隐藏会受影响）；
border-width：20px;/0 30px;默认值是medium；
border-color：red/rgba(255,0,255,0.2); 默认是当前颜色；

注意：color的值可以是transparent（透明）；

二、border-image：

border-image 通过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不为 0)；不过有的可以只设置width（不为0），不设置style（默认none）；

border-image-source：(none)；none值得时候表示border-image不做任何效果，边框使用 border-style 指定的样式；
border-image-slice：(100%)；[<number> | <percentage>]{1,4} && fill?；将图片切割成九宫格；（数值不带px）
border-image-width：(1)；背景图片宽度；既将元素也切割成九宫格；

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字；它表示 border-width 的倍数
auto 使用 auto， border-image-width 将会使用 border-image-slice 的值

border-image-outer：(0)；边框背景扩散;相当于把原来的贴图位置向外延伸。不能为负值；（最后一步渲染）
border-image-repeat：(stretch)；将图片的九宫格每个单元一一对应放入元素的九宫格；除去4个角外，上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性；

stretch：用拉伸方式来填充边框背景图
repeat：用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截断
round：用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框（缩放图片）

注意：

border-image-outset 参数一定要在 border-image-width 之后，假设border-image-width缺省，仍然需要在原来 border-image-width 写上 /；既：border-img：url 27 / / 10px round;
如果有 border-image-width/ border-image-outset 属性值，border-image-slice必须指定数值，否则不合语法；

三、三角形的实现：

由于css的边框都是以梯形呈现的（不是矩形），如下所示：

.container{
		   height:50px;
		   width:100px;
		   border:10px solid;
		   border-color:red blue;
		}

所以，当width是0的时候，可构造上下两个三角形，height是0则左右两个三角形；

如果，宽高都为0则构成4个三角形，其中三个边框颜色为透明的时候，则只显示一个三角形；

	    .container{
		   height:0px;
		   width:0px;
		   border:10px solid transparent;
		   border-bottom-color:red;
		}

此处，三角形的高为10px（border-bottom下边框的大小），长度为20px（左右两边边框的大小之和，各为10）；

如果，只有两个边的颜色是透明，则可构建等腰直角三角形；

.container{
		   width:0; height:0; 
		   border-width:20px;
		   border-style:solid;
		   border-color:#ff3300 #ff3300 #000000 #000000;
		}

此处，红色三角形的上底40px（左右边框的大小），右底为40px（上下两边边框的大小之和，各为20）；

如果，边框的大小不一样，则构成其他直角三角形（非等腰）；

.container{
		   width:0; height:0; 
		   border-width:20px 10px;
		   border-style:solid;
		   border-color:#ff3300 #ff3300 #000000 #000000;
		}

此处，红色三角形的上底20px（左右边框的大小），右底为40px（上下两边边框的大小之和，各为20）；

综合：（如下样式css实现）

      <div class="container">
          <p>这是一个测试练习！！！</p>
       </div>
      <div class="sanjiao"></div>

        .container{
		    width:480px;
			padding:5px;
			color:#fff;
			background:red;
			border-radius:15px;
		}
	    .sanjiao{
		   width:0; height:0; 
		   border-width:20px 10px;
		   border-style:solid;
		   border-color:#ff3300 #ff3300 #ffffff #ffffff;
		   margin-left:35px;
		}

四、自适应正方形的实现：

css height属性一般存在的问题

元素默认的height是auto（根据内容自动调整高度：既高度有子元素撑开），如果元素A的height设置了明确的有效的值，那么元素A的边框和背景将在这个height值的范围内，如果A里面的元素内容超出了指定的height值，则会溢出。A如何处理溢出，则有overflow决定；
当元素的height设置了百分比后，如果其父元素的height没有明确的值（默认是auto），那么设置百分比是无效的（元素设置了固定定位和绝对定位除外）；
如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。既：html, body { height: 100%; } ；这里的100%是浏览器视口的高度 == 100vh。
所以，如果一个元素A和他的所有父元素height都设置了100%（浏览器视口的高度，也是一个固定的值，浏览器可以算出），那么如果A元素再有margin或者padding的话，则页面出现滚动条（盒子模型=height+padding+margin）；如果A元素里面的内容超过了100%（的值），则会溢出A元素，如何处理溢出同样还是有overflow决定；

1、自适应正方形实现方法1：利用vw；

vw相对视口的宽度，视口被均分为100单位的vw。1vw = 1% viewport width；

<div class="square"></div>

.square{
		width:50vw;  /***（浏览器/屏蔽）视口宽度的50%***/
		height:50vw;
		background:red;
		}

2、自适应正方形实现方法2：利用padding-bottom；

      <div class="container">
           <div class="square"></div>
       </div>

       .container{
		    width:70%;
			background:yellow;
		}
	.square{
		    width:50%;  
			height:0;/***这个height设置为0,如果元素有内容，则溢出到padding-bottom上面***/
			/***如果元素这时候未设置height(:0),则默认height:auto;如果有内容(子元素)的话，
                 将撑开高度height(不为0的值)，则垂直>水平背景了***/
			padding-bottom:50%;/***这里不能用top，因为用top，且高度为0，如果有内容，则溢出到容器外了***/
			background:red; /***背景颜色默认是从元素的border开始渲染绘制的***/
		}

3、自适应正方形实现方法3：利用padding-top/bottom、position:absolute结合；

  <div class="container">
            <div class="square">
		      <div class="content"></div>
	    </div>
	<!---<div class="content"></div>--绝对定位元素，脱离文档（不产生高度），
		   写在这里，和写在上面的是一样的-->
   </div>

		.container{
		    width:70%;
			background:yellow;
			position:relative;
		}
		.square{
		    width:50%;  
			height:0;
			padding-top:50%; /***构造正方形，并撑起/增加父元素的高度***/
		}
		.content{
			position:absolute; /***绝对定位***/
			left:0;
			top:0;
			background:blue;
			width:50%;  /***这个宽度是相对于.container的宽度；和.square大小一致***/
			height:100%; /**这个高度也是相对于.container的高度，.container的高度是有.square撑起的**/
		}

4、自适应正方形实现方法4：利用伪元素(margin)padding-top/bottom撑开容器（父元素）；

   <div class="container">
           <div class="square">
		      <div class="content"></div>
		</div>
       </div>

		.container{
		    width:70%;
			background:yellow;
			position:relative;
		}
	
        .square::after{
		    content:"";     /***利于伪元素撑起.container的高度****/
			display:block;
			padding-top:50%;/**padding-bottom也是可以的**/
			width:50%;
		}
		.content{
		    width:50%;      /***相对于.container元素***/
			height:100%;    /***同样相对于.container元素***/
			position:absolute;
			background:blue;
		}

https://aotu.io/notes/2016/11/02/border-image/index.html

https://segmentfault.com/a/1190000010969367

https://qtdebug.com/qtbook-qss-border-image/

https://www.zhihu.com/question/35180018

https://blog.csdn.net/ztj771299799/article/details/79806769