首页 > 其他分享 >css3文字阴影和盒子阴影

css3文字阴影和盒子阴影

时间:2022-10-16 00:55:30浏览次数:41  
标签:css3 盒子 100px 阴影 偏移 shadow 0px

文字阴影

文字阴影的语法格式:
text-shadow:水平向右的偏移值 向下的偏移值  迷糊度 阴影的颜色,水平向右的偏移值 向下的偏移值  迷糊度 阴影的颜色;
可以有多个阴影,但是在实际的项目中最多一个阴影就可以了。
<style>
    div {
        font-size: 100px;
        text-align: center;
        /* 水平方向向右移动5px,垂直方向向下移动10px, 迷糊度[值越大越模糊], 阴影的颜色 */
        /* 当水平方向的值是负值的时候,将向左移动*/
        text-shadow: 5px 10px 20px red;
    }
</style>
<body>
    <div>雪月剑仙-李寒衣</div>
</body>

盒子阴影box-shadow

盒子阴影的语法格式: 水平偏移值,垂直偏移值,模糊度,向外延的值,颜色,内置阴影(inset)
内置阴影在盒子的左上角;默认情况阴影是在盒子的右下角。

<style>
    div {
        width: 300px;
        height: 100px;
        /* 水平偏移值,垂直偏移值, 阴影颜色 */
        box-shadow: 10px  10px pink;
    }
</style>
<div>雪月剑仙-李寒衣</div>

div {
    width: 300px;
    height: 100px;
    /* 水平偏移值,垂直偏移值,模糊度, 阴影颜色 */
    box-shadow: 10px 10px 5px pink;
}

让盒子的四周有阴影

div {
    width: 300px;
    height: 100px;
    /* 水平偏移值,垂直偏移值,模糊度, 阴影颜色 */
    box-shadow: 0px 0px 16px pink;
}
<div>雪月剑仙-李寒衣</div>

盒子阴影外延值

div {
    margin-top: 50px;
    width: 300px;
    height: 100px;
    /* 水平偏移值,垂直偏移值,模糊度,向外延的值,阴影颜色 */
    box-shadow: 0px 0px 16px 4px pink;
}
<div>雪月剑仙-李寒衣</div>

内置阴影

div {
    width: 300px;
    height: 100px;
    margin: 20px;
    /* 内置阴影在盒子的内部 */
    box-shadow: 0px 0px 16px 4px pink inset;
}
<div>雪月剑仙-李寒衣</div>

标签:css3,盒子,100px,阴影,偏移,shadow,0px
From: https://www.cnblogs.com/IwishIcould/p/16795452.html

相关文章

  • css3中的圆角border-radius
    css3的属性应该加上浏览器前缀不同的浏览器内核不同,因此css的前缀不同。常见的几种浏览器内核火狐浏览器Geoko内核前缀是-mox-谷歌浏览器,Webkit内核......
  • css3字体使用
    @font-face{font-family:'kaiti';src:url('../font/KaiTi.woff')format('woff'),url('../font/KaiTi.ttf')format('truetype'),url('../font/KaiTi.svg#GE_SS......
  • CSS3-动画
    CSS3-动画动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多......
  • 表现标准语言CSS3学习 入门+导入方式
    表现标准语言CSS3学习入门+导入方式如何学习:css是什么css怎么用(快速入门)css选择器(重点+难点)美化网页(文字、阴影、超链接、列表、渐变...)盒子模型浮......
  • CSS3新增样式
    CSS3新特性圆角:border-radiusradius:半径四个值是顺时针的顺序<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>demo</title>......
  • 盒子的定位
    定位:position;定位实现效果,让盒子压住盒子position的属性:默认属性:static;元素是静止值,没有开启定位。开启相对定位:relative;开启绝对定位:absolute;开启元素的固定定位:fixed;开......
  • CSS3 -2D转换之translate (移动:translate、旋转:rotate、缩放:scale)
    CSS3-2D转换之translate转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果,可以简单理解为变形移动:translate旋转:rotate缩放:scale1......
  • css3的flex布局使用
    flex-direction:容器主轴的方向;值:row(默认:x轴由左到右)、column(y轴由上到下)、row-reverse(x轴由右到左)、column-reverse(y轴由下到上)flex-wrap:项目是否换行;值:nowrap(默认:不换行......
  • 盒子模型
    概述把html元素看作盒子来实现网页布局一个矩形就是一个盒子,盒子四边叫做边框,内容到边框的距离叫内边距,边框间的距离或者边框与网页边界的距离叫外边距border<!DOCT......
  • 盒子模型
    面试鸭前端学习记录盒模型盒模型组成:由里向外content,padding,border,margin.盒模型是有两种标准的,一个是标准模型,一个是IE模型。IE盒模型Width/height=conten......