CSS--外发光与内阴影
外阴影:box-shadow: X轴 Y轴 Rpx color;
属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色
内阴影:box-shadow: X轴 Y轴 Rpx color inset;
默认是外阴影 内阴影:inset 可以设置成内部阴影
测试1: <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div> box-shadow: 0 0 10px #f00 (因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用 半径范围,颜色)
测试2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样
测试3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样
同理:你可以测试下一正值,一负值的效果,这里就不做测试了。。。。。。。。
测试4:<div style="box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ ></div>
你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)多练习几次就好
测试5:--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同
原文链接:https://www.cnblogs.com/telwanggs/p/7736454.html
CSS--外发光与内阴影的更多相关文章
- Ps中的难点问题分析
一.布尔运算的运用 1.布尔运算是在图形工具组中使用,快捷键“U” 2.使用方法:都是在同一图层下运算,在进行布尔运算之前,首先用路径选择工具,小黑箭头,快捷键是“A” 选取你要运算的图形. 3.布尔 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景
在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px ...
- CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆
1.渐变字体 主要是看:-webkit-background-clip: text; 该属性 <style> .b1{ width: 500px; height: 200px; font- ...
- box-shadow 同时有内阴影和外发光效果
box-shadow: 0px 0px 10px rgba(0,0,0,0.8) inset,0px 0px 5px rgba(200,200,200,0.5);
- css中常见的属性-----在路上(14)
一.css文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- CSS中的常用属性
一 CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/fon ...
- 【html】【5】html class属性css样式
必看参考: http://www.divcss5.com/css3-style/ http://www.jb51.net/css/142448.html http://www.w3school.com ...
- 偏门却又实用的 CSS 样式
::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...
- CSS样式有哪些常用的属性?
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...
随机推荐
- navicat链接阿里云mysql报80070007: SSH Tunnel: Server does not support diffie-hellman-group1-sha1 for keyexchange
http://www.jianshu.com/p/200572ed066c navicat 链接数据库 使用navicat 的ssh通道连接数据库回遇到权限问题 错误代码如下: 80070007: ...
- JVM参数设置及条调优原理
http://unixboy.iteye.com/blog/174173/ 堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟 ...
- Step4:SQL Server 跨网段(跨机房)复制
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 解决方案(Solution) 搭建过程(Process) 注意事项(Attention) 参考 ...
- python的类和对象
一.面向对象和面向过程 1.1面向过程的特点 优点是:极大的降低了写程序的复杂度,只需要顺着要执行的步骤,堆叠代码即可. 缺点是:一套流水线或者流程就是用来解决一个问题,代码牵一发而动全身. 1.2面 ...
- ucos ii 46个系统API函数解析
源: ucos ii 46个系统API函数解析
- 余额表前后台操作和对应sql
发生额的含义:产生于账行表. gl_je_lines账行表——>借贷(会产生额度,即发生额) —————————————————————————— gl_balances余额表: 余额 = ...
- 远程图片转化为base64
远程图片转化为base64 <?php /* * * 第一种方法 * 远程图片转化为base64,只支持http(推荐使用) * */ public static function imgUrl ...
- fjwc2019 D2T2 定价 (栈+set+贪心)
#182. 「2019冬令营提高组」定价 先瞄下数据范围 对于所有数据,1≤n≤1000,1≤m≤10^9,1≤q≤500000 .\textbf{2 操作的个数不超过 1000.} $10^9$位, ...
- P1357 花园
洛咕原题 题解 状压dp+矩乘 首先看到题目说M<=5,这么小的数据明显可以用状压保存相邻状态,于是可以得到一个80分的dp: 先筛出所有可用的状态,然后建立一个矩阵保存可转移的状态,再然后把每 ...
- socket:10038错误
转自:http://blog.csdn.net/chen495810242/article/details/42029825 winSock的一个bug:当closesocket多次错误使用时会导致问 ...