赞
踩
往期css3文章
详解 CSS3中最好用的布局方式——flex弹性布局(看完就会)
CSS3基础属性大全
CSS3动画属性 animation详解(看完就会)
CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会)
CSS3 Z—Index 详解
CSS3 positon定位详解(通俗易懂)
目录
border-image: linear-gradient 边框线性渐变的思路
border-image: linear-gradient 边框线性渐变的答案
border-image: linear-gradient 边框线性渐变的理解
首先 直接这样设置
border: 0.5px solid red;
0.5px的边框,肯定是不对的,边框大小会向上取整。
既然border不能设置小数的边框,那我们能不能找一个属性有相似的效果来替代它呢,当然可以,我们可以用box-shadow属性用阴影达到0.5px的边框效果,box-shadow阴影属性是允许小数值的,我们可以用它达到单条边框和四条边框。
直接设置伪类元素,设置指定的高度,通过定位来控制位置。
我们可以设置任意大小的边框,改变中心点,通过缩放效果(找好倍率)来达成想要的结果。
同样设置任意大小的边框,通过渐变属性改变一部分边框的颜色效果,比如将一部分边框融入背景,这样就能得到想要的效果。
- <style>
- div {
- box-sizing: border-box;
- background-color: blueviolet;
- width: 200px;
- height: 200px;
- margin: 100px auto;
- /* border: 1px solid red; */
- box-shadow: 0px 0px 0px 0.5px green;
- }
- </style>
- </head>
-
- <body>
- <div></div>
- </body>
- <style>
- div {
- position: relative;
- box-sizing: border-box;
- background-color: blueviolet;
- width: 200px;
- height: 200px;
- margin-top: 10px;
- /* box-shadow: 0px 0px 0px 0.5px green; */
- }
-
- div::after {
- position: absolute;
- content: "";
- background-color: red;
- width: 100%;
- height: 0.5px;
- bottom: 0px;
- }
- </style>
- </head>
-
- <body>
- <div></div>
- </body>
- <style>
- div {
- position: relative;
- box-sizing: border-box;
- background-color: blueviolet;
- width: 200px;
- height: 200px;
- margin-top: 10px;
- /* box-shadow: 0px 0px 0px 0.5px green; */
- }
-
- div::after {
-
- position: absolute;
- content: "";
- width: 200%;
- height: 200%;
- border: 1px solid red;
- transform-origin: 0 0;
- transform: scale(0.5);
-
-
- }
- </style>
- </head>
-
- <body>
- <div></div>
- </body>
- <style>
- div {
- position: relative;
- box-sizing: border-box;
- background-color: blueviolet;
- width: 200px;
- height: 200px;
- margin-top: 10px;
- /* box-shadow: 0px 0px 0px 0.5px green; */
- }
-
- div::after {
- display: block;
- position: absolute;
- content: "";
- width: 100%;
- height: 1px;
- bottom: 0px;
- background-color: red;
- background: linear-gradient(to bottom, transparent 50%, red 50%);
-
-
- }
- </style>
- </head>
-
- <body>
- <div></div>
- </body>
这种方法完全借助盒子阴影来达到指定效果,通过0.5px的阴影,让它达到类似0.5px边框的效果。
这种方法直接设置0.5px的高度,高度同样允许小数px,我们生成了一个新元素,来改变它的高度,让它充当边框。
利用缩放属性,我们设置一个1px边框,长度和宽度设置为被包裹子元素的两倍,当它缩小0.5的时候,就正好变成了子元素的宽高,1px的边框也缩小了一半变成了0.5px
这个其实是第二种属性的复杂版了,没有直接设置0.5px,而是设置了1px1上上面一半透明,来达到0.5px的边框效果,我们也可以直接设置1px的边框,然后同样透明0.5px,这个就不演示了。(这个属性有点复杂 后面会讲一下)
第一二 四种没有使用border属性,通过其他属性来达到类似的边框效果,第三种使用了边框然后进行了效果的修改,第四种也有边框效果的变种写法。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。