文字阴影

text-shadow:文字的阴影

  • x

  • y

  • blur:模糊度

  • color

  • 多阴影

  • ps:阴影默认颜色与文本颜色相同

  • ps:通过逗号的方式进行分割可以设置多阴影

盒子阴影

box-shadow:盒子的阴影

  • x

  • y

  • blur

  • spread:阴影扩散范围

  • color

  • inset:内阴影

  • 多阴影

  • ps:阴影默认颜色为黑色

  • ps:默认为外阴影,如果设置outset不起作用,可选值只有inset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片浮动效果 By ToDo Blog</title>
    <style>
        body {
            background: #F8F8FF;
        }
        ul {
            list-style: none;
        }
        li {
            float: left;
            margin: 50px;
            cursor: pointer;
            position: relative;
            top: 0;
            border-radius: 10px;
        }
        li img {
            border-radius: 10px;
        }
        li:hover {
            top: -3px;
            box-shadow: 0 5px 10px 3px #ccc;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="http://dotaoke.cn/img/css.jpg" alt="" width="238" height="119">
        </li>
        <li>
            <img src="http://dotaoke.cn/img/html.jpg" alt="" width="238" height="119">
        </li>
    </ul>
</body>
</html>

CSS3遮罩

mask:遮罩

  • url

  • repeat

  • x

  • y

  • w

  • h

  • 多遮罩

  • ps:mask暂时还没有标准化,所以需要添加浏览器前缀

  • ps:默认x,y平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遮罩 By ToDo Blog</title>
    <style>
        .mask {
            width: 700px;
            height: 700px;
            background: url('http://www.dotaoke.cn/img/user.jpg');
            -webkit-mask: url(http://www.dotaoke.cn/usr/themes/splity/images/ghs.svg) no-repeat 100px 100px / 500px 500px;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
</body>
</html>

CSS3倒影

box-reflect:倒影

  • above

  • below

  • left

  • right

  • 距离

  • 遮罩 | 渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒影 By ToDo Blog</title>
    <style>
        .box {
            margin: 50px;
            width: 300px;
            -webkit-box-reflect: below 5px linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1)100%);
        }
        .box img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://www.dotaoke.cn/img/user.jpg" alt="头像">
    </div>
</body>
</html>

模糊与计算

blur:模糊

calc:四则运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模糊与计算 By ToDo Blog</title>
    <style>
        img {
            filter: blur(10px);
            width: 300px;
        }
        .parent {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            height: 100px;
            background: yellow;
            width: calc(100% - 100px);
        }
    </style>
</head>
<body>
    <img src="http://www.dotaoke.cn/img/user.jpg" alt="头像">
    <div class="parent">
        <div class="box"></div>
    </div>
</body>
</html>

不起眼的小广告

do淘客