box-shadow outline 实现双边框 阴影

时间:2023-03-08 19:24:15
文字阴影
  1. text-shadow
  2. box-shadow
格式:text-shadow:x y blur color, … 参数 x        横向偏移 y        纵向偏移 blur        模糊距离 color        阴影颜色 文本阴影如果加很多层,会很卡很卡很卡
没有border-shadow  这一项
效果:
box-shadow  outline 实现双边框 阴影

box-shadow  outline 实现双边框 阴影

box-shadow  outline 实现双边框 阴影

 box-shadow  outline 实现双边框 阴影

box-shadow  outline 实现双边框 阴影

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.box{width: 100px;height: 100px;border:5px solid red;outline:9px solid blue;} </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
outline