【CSS】css特效（阴影shadow 渐变gradient 过渡transition 变形transform 滤镜filter）

贺情

已于 2022-05-17 20:57:55 修改

阅读量1.6k

点赞数

于 2022-05-05 21:52:22 首次发布

本文链接：https://blog.csdn.net/m0_50947589/article/details/124598128

版权

本文详细介绍了CSS中的阴影效果，包括块阴影和文字阴影，以及描边在特定浏览器中的应用。渐变部分讲解了线性渐变和径向渐变的实现方式。过渡效果让元素动态变化过程更加平滑，变形则涵盖了平移、旋转、伸缩和拉伸。最后，文章还探讨了滤镜的各种效果，如模糊、亮度、对比度等。

摘要由CSDN通过智能技术生成

阴影 shadow

分为块阴影box-shadow和文字阴影 text-shadow。

两者都有四个参数，分别是：右偏移量下偏移量模糊距离阴影颜色。

当模糊距离为负数时，阴影不可视。

描边 stroke

只在weikit内核的浏览器中适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        html{
            font-size: 62.5%;
        }
        p{
            height: 7rem;
            width: 300px;
            line-height: 7rem;
            text-align: center;
            margin: 0 auto;
            font-size: 3rem;
        }
        .p1{
            background-color: #d5d2c2;
            color: transparent;
            -webkit-text-stroke: 0.5px black;
            /* 描边，不是所有浏览器都兼容 */
            /* 在前加-webkit-，Chrome浏览器可识别 */
        }
        .p2{
            background-color: #454545;
            color: #333;
            text-shadow: -1px -1px 0 #cecece, 1px 1px 0 #5c5c5c;/*  添加两组阴影在同一文字上 */
        }
        .p3{
            background-color: black;
            color: #fff;
            text-shadow: -5px -5px 8px hotpink,/* 左上角阴影 */
                         5px -5px 8px hotpink,/* 右上角阴影 */
                        -5px  5px 8px hotpink,/* 左下角阴影 */
                         5px  5px 8px hotpink;/* 右下角阴影 */
        }
        .p4{
            background-color: #ccc;

最低0.47元/天解锁文章

贺情

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【CSS】css特效（阴影shadow 渐变gradient 过渡transition 变形transform 滤镜filter）

css特效（阴影shadow 渐变gradient 过渡transition 变形transform 滤镜filter）
复制链接

扫一扫