最适合新手的教程之html中的阴影（css）

最新推荐文章于 2024-01-09 09:39:01 发布

我是一株草我有三颗心

最新推荐文章于 2024-01-09 09:39:01 发布

阅读量2k

点赞数 3

分类专栏：前端网站开发文章标签： css html

本文链接：https://blog.csdn.net/weixin_44576310/article/details/90524256

版权

前端网站开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阴影的边框</title>
</head>
<style>
   .out,.in{ /*设置div的大小和边框*/
       width: 300px;/*设置宽度*/
       height: 150px;/*设置高度*/
       border: 1px solid BFBFBF;/*设置边框大小和边框颜色*/
       margin: 20px auto;/*？？？？？？？？？*/
   }
   .out{
       box-shadow: 0px 0px 20px 10px #aaa;
       /*第一个参数是阴影的左右方向，正数为偏向右边，负数偏向左边（0不偏向）*/
       /*第二个参数是阴影的上下方向，正数为偏向下边，负数偏向上边（0不偏向）*/
       /*第三个参数是阴影的羽化，数值越大羽化程度就越大*/
       /*第四个参数是阴影的的距离*/
       /*第五个参数是阴影的颜色*/
   }
   .in{
       box-shadow: 0px 0px 10px 1px #aaa inset;/*inset是里面的意思*/
   }
</style>
<body>
<div class="out">外边框阴影</div>
<div class="in">内边框阴影</div>
</body>
</html>

我是一株草我有三颗心

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
最适合新手的教程之html中的阴影（css）

<!doctype html><html><head><meta charset="utf-8"><title>阴影的边框</title></head><style> .out,.in{ /*设置div的大小和边框*/ width: 300px;/*设置宽度*/...
复制链接

扫一扫

专栏目录