css3阴影效果设置

最新推荐文章于 2024-07-26 08:45:03 发布
最新推荐文章于 2024-07-26 08:45:03 发布
阅读量936 收藏
点赞数 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .wrapper{
        width:70%;
        height:200px;
        margin:50px auto;
        text-align:center;
        line-height:200px;
        background-color:#fff;
    }
    .wrapper h2{
        font-size:30px;
    }
    .effect{
        box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        -webkit-box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        -moz-box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        -o-box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        position:relative;
    }
    .effect:after,.effect:before{
        content:'';
        position:absolute;
        background-color:red;
        top:50%;
        bottom:0;
        left:10px;
        right:10px;
        box-shadow:0 0 20px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
        -o-box-shadow:0 0 20px rgba(0,0,0,0.3);
        border-radius:100px/10px;
        z-index:-1;
    }
    ul{
        margin:20px auto;
        width:80%;
        text-align:center;
    }
    ul li{
        margin:0 20px;
        list-style: none;
        position:relative;
        display:inline-block;
        width:350px;
        height:250px;
        background-color:#fff;
        box-shadow:0 1px 5px rgba(0,0,0,0.27),0 0 5px rgba(0,0,0,0.1) inset;
    }
    ul li img{
        width:330px;
        height:230px;
        margin:10px;
    }

    ul li:after{
        content:'';
        position:absolute;
        z-index:-1;
        width:90%;
        height:80%;
        left:10px;
        bottom:15px;
        background-color:transparent;
        transform:skew(10deg) rotate(5deg);
        -webkit-transform: skew(10deg) rotate(5deg);
        -o-transform: skew(10deg) rotate(5deg);
        -moz-transform: skew(10deg) rotate(5deg);
        box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -moz-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
        -o-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
    }
    ul li:before{
        content:'';
        position:absolute;
        z-index:-1;
        width:90%;
        height:80%;
        right:10px;
        bottom:15px;
        background-color:transparent;
        transform:skew(-10deg) rotate(-5deg);
        -webkit-transform: skew(-10deg) rotate(-5deg);
        -o-transform: skew(-10deg) rotate(-5deg);
        -moz-transform: skew(-10deg) rotate(-5deg);
        box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -moz-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
        -o-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
    }
</style>
<body>
    <div class="wrapper effect">
        <h2>Hello,the world</h2>
    </div>
    <ul>
        <li><img src="test1.png"></li>
        <li><img src="test2.png"></li>
        <li><img src="Lighthouse.jpg"></li>
    </ul>
</body>
</html>
fly18702787810
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3-阴影效果
qq15045846160的博客
03-18 5805
一、给盒子添加阴影。 box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影； 注意： 1、默认情况下是外阴影。 2、阴影扩展是指在原有阴影上继续添加阴影。 3、当box-shadow：水平偏移 垂直偏移 模糊度；时。默认阴影颜色由盒子里面内容颜色决定。 二、给文字添加阴影。 text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色； &lt;!DOCTYPE ht...
【青山css】css3阴影效果属性详解及创意玩法
qq_28252421的博客
02-26 2万+
前言 css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。 属性介绍 语法 box-shadow: x-shadow y-shadow blur spread color inset; x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现 box-shadow: x-
css -- box-shadow阴影属性的复合写法及高级用法，超详细！
最新发布
共同学习，共同成长
07-26 4572
大家好，我是码喽的自我修养！今天给大家分享css3中的box-shadow属性的复合写法及高级用法！并提供具体代码帮助大家深入理解，彻底掌握！
CSS3 实现30种阴影特效
weixin_44240581的博客
01-18 1532
效果总览 盒子阴影 基本样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阴影特效</title> <style> .box { position: relative; width: 300px; height: 30
CSS 阴影效果
热门推荐
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
53种CSS3阴影效果box-shadows.css
12-13
**CSS3阴影效果详解** CSS3是Web设计领域的一个重要里程碑，它引入了许多新的特性，其中就包括了我们今天要讨论的`box-shadow`属性。`box-shadow`让我们能够为HTML元素添加各种复杂的阴影效果，使得网页设计更具...
23种css3图片阴影效果
07-19
纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。
CSS3中文字镂空、透明值、阴影效果设置示例小结
01-21
效果 text-stroke-color透明值让文字更柔和：代码 CSS Code复制内容到剪贴板 background-image:-webkit-linear-gradient(#eee,#000); -webkit-background-clip:text; -webkit-text-fill-color:tr
纯CSS3实现的阴影效果
09-25
在本文中，我们将深入探讨如何使用CSS3来创建阴影效果，包括字体阴影和内阴影。CSS3是 Cascading Style Sheets 的第三版，引入了许多新特性，其中之一就是阴影效果的增强，使得网页设计更加丰富多彩。 首先，我们来...
css3带阴影效果的tab选项卡特效代码
03-20
在这个“css3带阴影效果的tab选项卡特效代码”中，我们将探讨如何利用CSS3的阴影属性来实现具有视觉吸引力的选项卡效果。 首先，我们来看CSS3中的阴影属性。主要有三个：`box-shadow`、`text-shadow` 和 `inset-...
用CSS3实现阴影效果
Andone_hsx的博客
12-17 1217
任务描述 本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.外阴影，2.多行省略，3. 设置圆角。 外阴影 下面是基本的html结构： &lt;div class="shadow"&gt;&lt;/div&gt; 效果如下： 现在要左边，右边，下边都添加阴影。 效果如下： 该如何实现呢？ 咱们先实现右...
CSS实现阴影效果
localhost_1314的博客
12-26 1697
1.无阴影效果: 2.悬浮出现阴影效果: 3.代码:
项目总结(css3中的阴影效果)
时清云的博客
08-20 2万+
以前用的很少，没有仔细去了解过这一块，所以对于阴影和动画只是实现一些简单的需求。所以趁这次项目需求结合实践就去好好总结一下这一块。
CSS3实现图片阴影效果
改变世界编码
01-26 1574
开发工具与关键技术：前端开发 HTML 作者：陈芝番 撰写时间：2019.1.26 CSS3实现图片阴影效果 在学习CSS3，需要我们平时的多积累，一点一滴累积，好如我们学习英语。 1.效果呈现：box-Shadow图片，下面讲解图片呈现图片阴影效果，特别是边框阴影呈现的阴影效果明显， 下面是实现box-sh...
css阴影效果
遗失在古战场的博客
10-17 1037
实现css阴影效果 .tesr{     width: 96%;     margin-left: 2%;     padding-top: 5%;     margin-top: 5%;     box-shadow: -2px 0 0 #1aad19, //左阴影                                    0 -2px 0
php阴影效果,如何使用css3实现文字的单阴影效果和多重阴影效果（
weixin_29564301的博客
03-19 142
使用css3实现文本阴影效果的原理实现阴影效果主要是用text-shadow属性，根据W3C标准，如果我们想要在IE下兼容CSS3的阴影属性可以使用ie.css3-htc，不过按照标准InternetExplorer9以及更早版本的浏览器暂时不支持text-shadow属性。最基本的语法为：text-shadow:h-shadowv-shadowblurcolor;text-shadow属性设置水...
css3实现翘边阴影效果
星空物语博客
09-05 1460
原理：利用css3的box-shadow属性，transform：skew（），rotate（）属性，以及伪元素：after和：before效果如下图： /*box-shadow:x偏移量 y偏移量 模糊度 颜色*/ /*翘边阴影 */ *{ padding: 0; margin: 0; } .box{ position: relat
CSS 添加阴影（附代码案列讲解）
(黎子)人生编码
06-21 2037
CSS 阴影为网页元素添加了一种视觉效果，它可以增强页面的美感和层次感。通过简单的属性，我们可以为元素添加各种阴影效果，让设计更加生动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值