zoukankan      html  css  js  c++  java
  • CSS3之box-shadow--阴影外阴影与外发光

    基础语法

    外阴影:box-shadow:X Y Npx #color;

    内阴影:box-shadow:inset X Y Npx #color;

    第一个属性:阴影的X轴(可以使用负值)

    第二个属性:阴影的Y轴(可以使用负值)

    第三个属性:阴影的像素(大小)

    第四个属性:阴影的颜色

    内阴影:inset 这个可以设置内部阴影 具体看示例4

    :此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6,span,a等)不是用来设置文字阴影 如果设置文字阴影请参考:text-shadow

    示例1

    使用样式:box-shadow:0px 0px 8px #f00;因没有使其它X轴与Y轴移动 所在会在本身发生作用 后面的属性我想做前端的应该很明白了

    示例2

    使用样式:box-shadow:3px 3px 8px #f00;这时候与上面的不同 X轴与Y轴改变了 所以变成了这样‍

    示例3

    使用样式:box-shadow:-2px 0px 8px #f00,0px -2px 8px #000,0px 2px 8px #9e038a,2px 0px 8px #0f0;也许你看到这样的代码会感觉很乱 但是看到效果图片之后我想你就能立刻懂得这是怎么做的了无非改一下X轴与Y轴与颜色值 还有阴影大小

    示例4——内阴影

    ‍样式使用:box-shadow: inset 0px 0px 30px red;与上面的相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    hdu 1086 You can Solve a Geometry Problem too 求n条直线交点的个数
    2019 上半年 南昌网络赛
    第十章 存储过程和函数
    第九章 Mysql函数
    第八章 Mysql运算符
    第七章 插入、更新与删除数据
    第六章 查询数据
    第五章 触发器
    第四章 视图
    第三章 索引
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11473748.html
Copyright © 2011-2022 走看看