CSS3实现曲线阴影和翘边阴影_css3 曲线块

作者：2023面试高手 | 2024-03-18 23:23:04

踩

css3 曲线块

预备知识

DIV+CSS基础
圆角:border-radius
2D变换:transform:skew && rotate
伪类::before 和 :after

效果图

效果图 ## 代码

HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈!

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS3实现曲线阴影和翘边阴影</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
          <div class="wrap effect">
            <h1>啦啦啦德玛西亚!!!!</h1>
          </div>
          <p>这是曲线阴影效果!!!!</p>
          <ul class="box">
            <li><img src="img/iconfont-blog.jpg" alt="测试图片">1
2
3
4
5
6
7
8
9
10
11
12
13

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】