首页 > Web开发 > 详细

css3阴影

时间:2020-08-16 13:28:58      阅读:78      评论:0      收藏:0      [点我收藏+]

box-shadow

设置一个或者多个下拉阴影的框。

语法

box-shadow: h-shadow|v-shadow|blur|spread|color|insert;

h-shadow 水平方向偏移量
v-shadow 竖直方向偏移量
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
insert 可选。将外部阴影 (outset) 改为内部阴影。

兼容性:IE9+、Firefox 4、Chrome、Opera 、Safari 5.1.1

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style type="text/css">
    div {
        box-shadow: 10px 10px;
        width: 200px;
        height: 200px;
        background: #abcdab;
    }
</style>

<body>
    <div></div>
</body>
</html>

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style type="text/css">
    div {
        box-shadow: 10px 10px 10px 0 #00f;
        width: 200px;
        height: 200px;
        background: #abcdab;
    }
</style>

<body>
    <div></div>
</body>
</html>

技术分享图片

https://www.w3school.com.cn/tiy/t.asp?f=css3_box-shadow

css3阴影

原文:https://www.cnblogs.com/LC161616/p/13512162.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!