分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

css3_box-shadow使用记录

发布时间:2023-09-06 01:47责任编辑:苏小强关键词:暂无标签

1、box-shadow这个属性有6个参数可设置,使用的时候比较少用,每次使用的时候都会忘记,故写此文作记录。

样式:

1 /*1.添加此属性添加阴影*/2 box-shadow: 0 0 10px 10px blue;3 /*box-shadow: h-shadow v-shadow blur spread color inset;*/4 /*三个参数:1.垂直距离 2.水平距离 3.模糊距离 ?4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/

全部代码:

 1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<style type="text/css"> 7 ????????????#box{ 8 ????????????????height: 100px; 9 ????????????????width: 100px;10 ????????????????border: 2px solid black; ???11 ????????????????12 ????????????????/*1.添加此属性添加阴影*/13 ????????????????box-shadow: 0 0 10px 10px blue;14 ????????????????/*box-shadow: h-shadow v-shadow blur spread color inset;*/15 ????????????????/*三个参数:1.垂直距离 2.水平距离 3.模糊距离 ?4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/16 ????????????????17 ????????????????18 ????????????????19 ????????????????margin: 100px auto;20 ????????????}21 ????????</style>22 ????</head>23 ????<body>24 ????????<div id="box"></div>25 ????</body>26 </html>
View Code

实现如下的效果图:

css3_box-shadow使用记录

原文地址:https://www.cnblogs.com/wush-1215/p/8652506.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved