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 其它属性与外阴影相同

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

  • 相关阅读:
    activiti并行和串行区别
    SpringMVC 封装返回结果对象
    maven基础
    activiti表
    SpringBoot进阶
    SpringBoot基础
    javascript ES6模块化
    Vuejs搜索下拉框
    Vuejs2.0 + bootstrap demo
    maven settings.xml
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11473748.html
Copyright © 2011-2022 走看看