text-shadow和box-shadow和blur模糊和calc计算和CSS hack

九阈

已于 2022-06-05 14:33:25 修改

阅读量278

点赞数

分类专栏： # CSS 文章标签： css

于 2021-08-23 16:23:47 首次发布

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119834195

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

本文介绍了CSS中的text-shadow和box-shadow属性，用于创建文字阴影和盒子阴影效果，提供多个示例展示不同阴影配置，包括外阴影、内阴影、多层阴影以及动态阴影效果。同时，提到了CSS hack技术，用于解决不同浏览器之间的兼容性问题。

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

text-shadow文字阴影

注：阴影的默认颜色是跟文字样色相同，通过逗号的方式进项行分割，可以设置阴影。默认值： none

text-shadow: h-shadow v-shadow blur color;

在这里插入图片描述
例子

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow: 0 0 20px #fefcc9,
                     10px -10px 30px #feec85,
                     -20px -20px 40px #ffae34,
                     20px -30px 35px #ec760c,
                     -20px -40px 40px #cd4606,
                     0 -50px 65px #973716,
                     10px -70px 70px #451b0e;
   }
   div {
text-shadow:0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>求符合给定条件的整数集</h1>
<div>霓虹灯效果的文本阴影！</div>
</body>
</html>

在这里插入图片描述

box-shadow盒子阴影

默认值： none

box-shadow: h-shadow v-shadow blur spread color inset;

在这里插入图片描述
注：盒子阴影的默认颜色是黑色
默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影。
例子

<!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>
        .box{width: 200px;height: 200px;background: red;margin: 100px;box-shadow: 10px 10px /* 10px */ 5px blue /* inset */;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述
margin:-100px;的意思就是四个边，上右下左，都缩小100px。

盒子阴影效果

<!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>李沁</title>
    <style>
        ul{list-style: none;}
        li{float: left;margin: 50px;cursor: pointer;position: relative;top: 0;transition: .5s;border-radius: 3px;}
        li:hover{top: -3px;box-shadow: 0px 5px 10px 3px green;}
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="http://p4.itc.cn/images01/20201021/d0c9267035e64707bd4a2e5db0fa37d7.jpeg" alt="李沁"width="70%" height="60%">
        </li>
        <li>
            <img src="https://p0.ssl.qhimgs4.com/t01d6d58bd5f709feea.bmp?size=440x494" alt=""width="70%" height="60%">
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

box-reflect倒影和scale负值

box-reflect倒影和scale负值（了解）
above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边

blur模糊和calc计算

blur模糊和calc计算

<!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>
        img{filter:blur(10px);}
        .parent{width: 800px;height: 300px;border: 1px solid red;}
        .box{height: 100px;width: calc(100% - 100px);<!-- 得有空格-->background-color: yellow;/* float: right; */}
    </style>
</head>
<body>
    <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t011183a68c4496d216.png" alt="">
    <div class="parent">
        <div class="box"></div>
    </div>
</body>
</html>

在这里插入图片描述
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
在这里插入图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
text-shadow和box-shadow和blur模糊和calc计算和CSS hack

font-face字体图标font-face是css3中的一个模块，他主要是把自己定义的web字体嵌入到你的网页中。inconfont矢量图标库 https://www.iconfont.cn添加链接描述自定义字体图标https://icomoon.io/apptext-shadow文字阴影注：阴影的默认颜色是跟文字样色相同，通过逗号的方式进项行分割，可以设置阴影。默认值： nonetext-shadow: h-shadow v-shadow blur color;例子<!DOC
复制链接

扫一扫

专栏目录