css实现多种边框及多边形发光效果练习

一、圆角阴影(文字标题时用到)
在这里插入图片描述

.shadow {
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background-color: #ffa500;
    box-shadow: 0 5px 0 0 #ff4500;
  }

二、边框四角特殊效果
css实现多种边框及多边形发光效果练习_第1张图片
方法一:利用伪元素:before,:after

/*less样式*/
.corners {
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid #ffa500;
    &:before{
      content: '';
      position: absolute;
      bottom: -1px;
      top: -1px;
      left: 20px;
      right: 20px;
      border-bottom: 1px solid #fff;
      border-top: 1px solid #fff;
    }
    &:after{
      content: '';
      position: absolute;
      left: -1px;
      right: -1px;
      top: 20px;
      bottom:20px;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
  }

如果要在div里写文字,添加适当的padding,:before、:after中的border-color改成对应的背景色;通过改变left、right、top、bottom以及border-width可以分别实现以下效果:
css实现多种边框及多边形发光效果练习_第2张图片css实现多种边框及多边形发光效果练习_第3张图片
方法二:利用线性渐变以及背景定位
css实现多种边框及多边形发光效果练习_第4张图片

.border {
    width: 200px;
    height: 200px;
    border: 1px solid #ffa500;
    background: linear-gradient(#ffa500, #ffa500) left top,
    linear-gradient(#ffa500, #ffa500) left top,
    linear-gradient(#ffa500, #ffa500) right top,
    linear-gradient(#ffa500, #ffa500) right top,
    linear-gradient(#ffa500, #ffa500) left bottom,
    linear-gradient(#ffa500, #ffa500) left bottom,
    linear-gradient(#ffa500, #ffa500) right bottom,
    linear-gradient(#ffa500, #ffa500) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 20px, 20px 1px;
  }

知识点:
1、linear-gradient() 函数用于创建一个线性渐变的 “图像”
linear-gradient(angle, color-stop1, color-stop2, …):
取值如下:
angle:用角度值制定渐变的方向或顺时针角度
to left:从右到左,相当于:270deg
to right:从右到左,相当于:90deg
to top:从右到左,相当于:0deg
to bottom:从右到左,相当于:180deg,这是默认值,可不写
color-stop:用于制定渐变的起止颜色
color:指定颜色
length:用长度值制定起止色位置,不允许负值
percentage:用百分比制定起止位置
background-image: linear-gradient(135deg,#fff 30%, #0ae 31%,#0ae 66%, #fff 80%)
background-image: linear-gradient(顺时针角度, 开始颜色 结束位置, 中间颜色1 开始位置,中间颜色1 结束位置,结束颜色 开始位置)
如果数字不是连续的,他们之间存在数值差,那么数值差的之间的两种颜色默认就是渐变效果。如果最后一个颜色没有规定位置,那么渐变结束位置就是100%。
2、background:设置多个背景图像(并指定他们的位置)
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background 的简写属性不是按照规定的顺序来书写的,可以根据自己的喜好自定义属性的书写顺序。
background-position:设置背景图像的起始位置。
取值:
css实现多种边框及多边形发光效果练习_第5张图片
background-size:设置背景图片大小;
      background-size: 1px 20px;第一个值指定图片的宽度,第二个值指定图片的高度;
      background-size: 1px 20px, 20px 1px;逗号分隔的多个值:设置多重背景;
3、多背景写法
多个背景图片用逗号隔开,每个背景图片都是以层的形式显示,越靠前的图片层级越高。
每一个背景图片的写法都和以前单个背景图片的写法是一样的。可以指定图片的平铺方式,位置等等。
background-size个数如果比background少,那么重复background-size的设置。
其他效果展示:
1、四角颜色不一样
css实现多种边框及多边形发光效果练习_第6张图片

.border{
    width: 200px;
    height: 200px;
    background: linear-gradient(#07c160, #07c160) left top,
    linear-gradient(#07c160, #07c160) left top,
    linear-gradient(#1989fa, #1989fa) right top,
    linear-gradient(#1989fa, #1989fa) right top,
    linear-gradient(#ee0a24, #ee0a24) left bottom,
    linear-gradient(#ee0a24, #ee0a24) left bottom,
    linear-gradient(#ff8917, #ff8917) right bottom,
    linear-gradient(#ff8917, #ff8917) right bottom;
    background-repeat: no-repeat;
    background-size: 2px 20px, 20px 2px;
  }

2、切角效果
css实现多种边框及多边形发光效果练习_第7张图片

.cut {
   width: 200px;
   height: 200px;
   background: linear-gradient(135deg, transparent 15px, #F8E2EB 0) top left,
   linear-gradient(-135deg, transparent 15px, #ace 0) top right,
   linear-gradient(-45deg, transparent 15px, #F8E2EB 0) bottom right,
   linear-gradient(45deg, transparent 15px, #ace 0) bottom left;
   background-size: 50% 50%; /*每个块在水平和垂直方向上都占元素尺寸的50%*/
   background-repeat: no-repeat;
}

3、内圆角效果
css实现多种边框及多边形发光效果练习_第8张图片

.round {
   width: 200px;
   height: 200px;
   background: radial-gradient(circle at top left, transparent 15px, #F8E2EB 0) top left,
   radial-gradient(circle at top right, transparent 15px, #ace 0) top right,
   radial-gradient(circle at bottom right, transparent 15px, #F8E2EB 0) bottom right,
   radial-gradient(circle at bottom left, transparent 15px, #ace 0) bottom left;
   background-size: 50% 50%;
   background-repeat: no-repeat;
}

3、四角是小方块
css实现多种边框及多边形发光效果练习_第9张图片

.s-corner {
   width: 200px;
   height: 200px;
   box-shadow: 0px 0px 10px #00bfff;
   background: linear-gradient(#00bfff,#00bfff) left top,
   linear-gradient(#00bfff,#00bfff) left bottom,
   linear-gradient(#00bfff,#00bfff) right top,
   linear-gradient(#00bfff,#00bfff) right bottom;
   background-size: 4px 4px;
   background-repeat: no-repeat;
}

三、多重边框效果
通过box-shadow可实现多重边框效果。
css实现多种边框及多边形发光效果练习_第10张图片
1、box-shadow

.box{
   width: 200px;
   height: 200px;
   box-shadow: 0px 0px 0px 5px #ee0a24, 0px 0px 0px 10px #07c160;
}

2、outline

.box{
   width: 200px;
   height: 200px;
   border: 5px solid #ee0a24;
   outline: 5px solid #07c160;
}

此种方式还可设置为虚线等样式,兼容性好,不过只能实现双层边框,而且outline没有圆角效果。
四、内发光效果
css实现多种边框及多边形发光效果练习_第11张图片

.light {
   width: 200px;
   height: 200px;
   box-shadow: 0px 0px 10px #ee0a24 inset, 0px 0px 0px 15px #fff inset, 0px 0px 10px 15px #07c160 inset;
}

五、斜六边形发光效果
css实现多种边框及多边形发光效果练习_第12张图片

.six {
   width: 200px;
   height: 70px;
   position: relative;
   border-radius: 1px;
   filter: drop-shadow(0 0 6px #07c160);/*滤镜投影,实现阴影效果*/
   background: #00bfff;
}
.six:before {
   content: '';
   position: absolute;
   width: 30px;
   height: 63px;
   border-radius: 2px;
   transform-origin: top right; /*旋转原点*/
   transform: rotate(-25deg);
   left: -30px; /*跟宽度一致*/
   top: 0;
   background: #00bfff;
}
.six:after {
   content: '';
   position: absolute;
   width: 30px;
   height: 63px;
   border-radius: 2px;
   transform-origin: left bottom;
   transform: rotate(-25deg);
   right: -30px;
   bottom: 0;
   background: #00bfff;
}

如果要添加文字,需要在内部添加div或者span,设置position:relative;z-index:10;
因为这个形状不是标准的,所以伪元素的宽、高、旋转角度得重新计算,无法直接套用。

你可能感兴趣的:(css实现多种边框及多边形发光效果练习)