text-shadow和box-shadow属性学习

text-shadow和box-shadow属性的学习记录

text-shadow 文字阴影

语法：

text-shadow: x轴的偏移距离(向右为正) y轴的偏移距离(向下为正) 模糊程度(可选，默认0px) 阴影颜色(可选，默认黑色);

然后代码和对应的效果好了

<style>
span {/* 阴影 */text-shadow: 8px 8px 1px #ff9988;
}
</style>
<span>数量上不行，但是在质量上我们赢了。</span>

这只是阴影网右下角去的，当然可以往其他方向上去，如果x轴的值为0，则是在正下方。

<style>
span {/* 阴影 */text-shadow: 0px 8px 1px #ff9988;
}
</style>
<span>数量上不行，但是在质量上我们赢了。</span>

如果X轴的值为负值，那阴影就是在左侧。

<style>
span {/* 阴影 */text-shadow: -8px 8px 1px #ff9988;
}
</style>
<span>数量上不行，但是在质量上我们赢了。</span>

相应的，如果Y轴的值为负值，则阴影向上偏移。（这里就不放图了。）

box-shadow 盒子阴影

语法：

box-shadow: x轴的偏移距离(向右为正) y轴的偏移距离(向下为正) 模糊距离(可选，默认0px) 阴影大小(可选，默认0px) 阴影颜色(可选，默认黑色) inset(可选，内阴影);

<style>
#tag {height: 200px;width: 200px;background: yellow;box-shadow: 12px 12px 20px 0px #00ff00;
}
</style><div id="tag"></div>

如果将box-shadow改一下：box-shadow: 12px 12px 20px 20px #00ff00;

这里就不去多做测试了，基本和text-shadow一样，X轴和Y轴的参数可以为负数，而模糊距离，阴影大小不可以为负数，但是可以选择不填写。

而对于inset就是把阴影放到了容器的内部:box-shadow: 12px 12px 20px 0px #00ff00 inset;，也是可选的。

text-shadow和box-shadow属性学习相关推荐

Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...
计算机颜色系统是三大色彩体系,色彩体系三大属性学习
色彩体系三大属性学习色彩的三要素--色相.明度.纯度色相(表,表现):即色彩的相貌和特征.自然界中色彩的种类很多,色相指色彩的种类和名称.如:红.橙.黄.绿.青.蓝.紫等等颜色的种类变化就叫色相. ...
From Shadow Generation to Shadow Removal （CVPR2021）阅读笔记
前人的对于阴影的数据集的采用: For most of them a set of paired shadow images and their corresponding shadow-free v ...

text-shadow和box-shadow属性学习

text-shadow 文字阴影

box-shadow 盒子阴影

text-shadow和box-shadow属性学习相关推荐

最新文章

热门文章