怎么实现阴影效果呢？

我们在前端的设计中常常会用到图片和文字，如果只是单调的图片或文字，不怎么好看。所以我们要给它别的效果，比如：阴影效果。要实现阴影效果，我们就要用到box-shadow属性，它是一个复合属性，用于整个盒模型添加阴影。它有4个属性值：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。好了让我们看下有阴影和没有的区别。
代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#divone {width: 300px;height: 300px;margin: 200px auto;padding: 10px;font-size: 25px;text-align: center;line-height: 300px;border: 10px solid #900;border-radius: 40px;
}
</style>
</head><body>
<div id="divone"><img src="./null-7625848be744b51b.jpg" style="width: 300px; height: 300px;" alt="">
</div>
</body>
</html>

效果图：

我们给它加一句代码看看：

box-shadow: 10px 10px 5px #000000;/*对盒子添加阴影*/

下面是添加了阴影的：

是不是好看一点了呢，那你们学会了吗(๑＞ڡ＜)✿

怎么实现阴影效果呢？相关推荐

html如何给文字添加阴影效果,css中怎么给字体添加阴影效果
css中可以使用text-shadow属性给字体添加阴影效果,text-shadow是CSS样式属性单词,是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式. text-shadow属性的语法 ...
CSS实现跨浏览器兼容性的盒阴影效果
2019独角兽企业重金招聘Python工程师标准>>> CSS实现跨浏览器兼容性的盒阴影效果一.无关紧要碎碎念在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了. ...
实现给一个DIV加阴影效果！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
（转）教你实现Winform窗体的四边阴影效果
1.首先我们得有这样一张阴影图片. 2.然后分别有两个窗体去实现这个阴影效果. SkinForm - 用于实现阴影的绘制,特性:鼠标可穿透,无法点击,跟随窗体. SkinMain - 主窗体,也是承载 ...
CALayer 知识：创建带阴影效果的圆角图片图层和创建自定义绘画内容图层
效果如下: KMLayerDelegate.h 1 #import <UIKit/UIKit.h> 2 3 @interface KMLayerDelegate : NSObject 4 ...
HTML5 利用canvas API 展示阴影效果
HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章 <!DOCTYPE html> <head> < ...
移动端取消button点击出现阴影效果
为什么80%的码农都做不了架构师?>>> 移动端取消button点击出现阴影效果 -webkit-tap-highlight-color: rgba(255, 255, 255 ...
html左右阴影效果图,css实现横向菜单带阴影效果(不用滤镜实现)
这里用css实现不用滤镜实现阴影效果.代吗及详解如下: xhtml代码: 例如: href="http://www.goodjob.cn/">中国俊才网中国俊才网 href= ...
阴影效果 ShadowLayout 布局实现（让控件实现立体效果）
效果第二张和第三张图是加入了阴影效果的,是不是觉得立体感很强,感觉图片是浮在屏幕上.这个效果也可以用Google 提供扩展包下的CardView控件来实现,而这篇文章是带大家自己来实现这样一个效 ...
android 写字体投影,android之字体阴影效果
复制内容到剪贴板代码: xmlns:tools="http://schemas.android.com/tools" android:layout_width="mat ...

怎么实现阴影效果呢？

怎么实现阴影效果呢？相关推荐

最新文章

热门文章