练习题目

完成一下图片的实现过程：

鼠标点击显示阴影。

实现代码

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 120px;height: 80px;line-height: 80px;margin:200px auto;}input{width: 120px;height: 80px;border: 1px solid black;font-size: 40px;font-family: "宋体";border-radius: 40px;}input:hover{text-shadow: 2px 2px 2px red;box-shadow: 3px 0px 10px red,-3px 0px 10px blue,0px -5px 10px green,0px 5px 10px black;}</style>
</head>
<body><div id="test"><input type="button" name="" value="按钮"></div></body>
</html>

实现结果

实现点击后的结果如下：

实验目的达到。

web阴影shadow练习相关推荐

布局阴影shadow的制作
布局阴影shadow的制作最近的项目,因为是和书籍有关,所以UI和我商量时问我能不能在书架显示的给每本书(item)加一下阴影,我说可以啊,因为CardView有显示阴影的属性,应该很方便 .但 ...
android bitmap 阴影,Android编程之阴影(Shadow)制作方法
本文实例讲述了Android编程之阴影(Shadow)制作方法.分享给大家供大家参考,具体如下: 先看运行效果图如下: 阴影制作:包括各种形状(矩形,圆形等等),以及文字等等都能设置阴影. 阴影制作是 ...
iOS 圆角cornerRadius、边框border、阴影Shadow
圆角cornerRadius 先看一下官网解释 Setting the radius to a value greater than 0.0 causes the layer to begin dra ...
Flutter Web：Shadow Root问题
document.getElementById找不到节点在flutter1.x版本的dev分支上可以使用flutter web,但是我们在使用第三方js sdk的时候会出现问题,比如AgoraRtc ...
iOS 阴影(shadow)
1. 简单阴影我们给layer设置了shadowOpacity后就能得到一个简单的阴影 view.layer.shadowOpacity = 1; shadowOpacity设置了阴影的不透明度,取 ...
Android 自定义阴影Shadow颜色，大小等样式
最近在项目碰到一个比较头疼的项目,设计师需要给ui图中的一些按钮之类的东西添加阴影.乍一看设计图,这没啥嘛,咱们Android中不是有这个属性嘛,于是撸起袖子开搞: <TextViewandro ...
Android:自定义Shape 加上阴影shadow之方法
直接用layer-list来实现,在项目 res->drawable中创建一个xml,如果列表中有layer-list选择的话直接选择创建,如果没有的话就随意(似乎4.0以下没有 layer-l ...
U3D 平行光阴影细节 Directional Shadow Details
Desktop This page explains shadows from Directional lights in detail. 此页面详细介绍了平行光阴影. Directional lig ...
Directional Shadow Details 平行光阴影细节
This page explains shadows from Directional lights in detail. 此页面详细介绍了平行光阴影. Directional lights are ...

web阴影shadow练习

练习题目

实现代码

实现结果

web阴影shadow练习相关推荐

最新文章

热门文章