一、box-shade

box-shade:给对象实现图层阴影效果
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开

取值：
box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小；
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数；
以上内容引用自博客

二、实现图片的内阴影

给图片添加内阴影一共分为三步

将img标签放到div标签里面
为div标签的父元素div设置box-shadow属性
为img标签设置position: relative;z-index: -1;属性，先设置相对定位，然后将阴影显示在最顶层

范例代码如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">* {margin: 0;padding: 0;}div.first {display: inline-block;box-shadow:inset 0 0 20px  red;}div.first div.first_context img {position: relative;z-index: -1;}</style><title>box-shade学习</title>
</head><body><div class="first"><div class="first_context"><img src="https://zl.crazymen.cn/upload/boy.jpeg"alt="图片"></div></div><div class="second"><div class="second_context"></div></div>
</body></html>

效果图如下所示：

以上代码可以使用伪元素:before实现，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">* {margin: 0;padding: 0;}div.first {position: relative;display: inline-block;}div.first::before {content: "";display: inline-block;position: absolute;width: 100%;height: 100%;box-shadow: inset 0 0 20px red;}</style><title>box-shade学习</title>
</head><body><div class="first"><div class="first_context"><img src="https://zl.crazymen.cn/upload/boy.jpeg" alt="图片"></div></div><div class="second"><div class="second_context"></div></div>
</body></html>

三、自定义按钮

按钮的制作，主要包括按钮的大小定制，背景颜色定制，字体大小定制等；
范例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">div.main input.btn1,div.main button.btn2{width: 80px;height: 35px;background-color: beige;border: 0;border-radius: 5px;}div.main div.btn3{display: inline-block;width: 80px;height: 35px;line-height: 35px;background-color: beige;border: 0;text-align: center;border-radius: 5px;font-size: 14px;}</style><title>button学习</title>
</head>
<body><div class="main"><input class="btn1" type="button" value="按钮1"><button class="btn2">按钮2</button><div class="btn3">按钮3</div></div>
</body>
</html>

效果图如下：

box-shade用法相关推荐

calibre中的hcell_Calibre LVS BOX 详细用法
LVS BOX的使用对于后端的团队协作起到非常便利的作用. 通过在lvs rules file添加BOX的相关语句可以达到这个目的,但也可以通过配置LVS Options等来更加灵活的使用. 依照不同 ...
calibre中的hcell_[ Calibre ] LVS BOX 详细用法
LVS BOX的使用对于后端的团队协作起到非常便利的作用. 通过在lvs rules file添加BOX的相关语句可以达到这个目的,但也可以通过配置LVS Options等来更加灵活的使用. 依照不同 ...
vagrant box各种命令汇总
最近在研究laravel,中间用到了vagrant 虚拟机管理工具,学习一下他的命令 vagrant box命令用于管理boxes的命令,比如添加.删除等等. 此命令的功能主要通过以下子命令完成: ...
vagrant box命令
vagrant box命令用于管理boxes的命令,比如添加.删除等等. 此命令的功能主要通过以下子命令完成: add list outdated prune remove repackage up ...
matlab中的plot的用法
文章目录画单个带点的黑色实线: 在一张图片里绘制多副可以使用subplot命令: 标题使用title()命令图片叠加 hold on,box on;用法 matlab中的plot的用法画单个带点 ...
第二个MFC实例：GPA计算器
一.目的:此文通过一个GPA计算器的制作,介绍基于对话框的应用程序的编程方法.常用控件的编程技巧以及控件外观的更改技巧. 二.功能描述:所谓GPA计算器,即进行GPA换算. 功能要求由如下几点: 1. ...
看了它，搞定JQurey
JQurey 1.jQurey的选择器 $(".box") 通过类名 $("div") 通过标签名 $("#box") 通过id 特殊选择器 ...
MFC日常使用总结：
文章目录 1. DDX_TEXT() 1.1 DoDataExchange( )作用 2. LRESULT 3. 套接字 4. unsigned int 用法 5. 什么是COLORREF? 6. W ...
boost::geometry::model::box用法的测试程序
boost::geometry::model::box用法的测试程序实现功能 C++实现代码实现功能 boost::geometry::model::box用法的测试程序 C++实现代码 #inc ...
Check Box的详细用法
勾选时...做某种算法---不勾选时做另一种算法 if ( BST_CHECKED == IsDlgButtonChecked( IDC_CHECK1 ) ) { // 勾选 } else { } ...

box-shade用法

文章目录

一、box-shade

二、实现图片的内阴影

三、自定义按钮

box-shade用法相关推荐

最新文章

热门文章