css3阴影 | 易学教程

CSS边距---盒子模型

阅读更多关于 CSS边距---盒子模型

CSS盒子模型盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成，这些属性我们可以把它转移到我们日常生活中的盒子上来理解，日常生活中所见的盒子也就是装东西的箱子，也具有这些属性，所以叫它盒子模型其中content(内容)又可以有两个元素width(宽)和height(高) CSS边框样式可以使用border-style来设置边框的样式，也可以分别来设置上下左右的样式： border-top-style border-left-style border-right-style border-bottom-style 边框样式有很多种，可以定义很多，比如单边框，虚线的边框，实线的边框，双边框，还有没有边框的边框。分别都可以用border-style属性的上下左右后面接上，下表的值值描述 none 定义无边框 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义

文本的阴影

阅读更多关于文本的阴影

文本的阴影文本阴影：text-shadow css3服务器端字体：@font-face 关于背景的：background-size 背景的尺寸关于边框： border-radius圆角边框 box-shadow 盒子阴影 box-shadow：1,2,3,4,5,6 1.水平阴影的位置必须 h-shadow 2.垂直阴影的位置必须 v-shadow 3.模糊距离可选 blur 4. 阴影的尺寸可选 spread 5. 阴影的颜色可选 color 6.将外部阴影（outset）改为内部可选可选 inset 来源： https://blog.csdn.net/Jump_Monkey/article/details/100133671

文本阴影和边框阴影

阅读更多关于文本阴影和边框阴影

文本阴影语法 text-shadow：h-shadow v-shadow blur color；在CSS3之前，除非使用图片，否则无法给文本添加阴影效果。现在，使用text-shadow属性，可以为文本添加一个或多个阴影及模糊效果。前两个0ffset必需添加，后两个clur，color可选! 不管是偏移，还是模糊，都不会改变元素本身的尺寸。因此，发生偏移、模糊后，阴影可能会超出元素本身，延伸到元素的边界之外。除了单阴影外，还可以使用逗号分隔的阴影列表，为文本设置多重阴影效果。通过多重阴影的叠加，可以实现很多有趣的效果。如，word中的空心文字、阳文、阴文这些文本特效，都可以通过多重阴影来实现。在文本的上、下、左、右四个方向各添加1px的黑色阴影，可以实现空心文字效果；在文本的左上和右下各添加 1px的错位补色阴影，可以实现阳文文字效果；把阳文的左上和右下的阴影颜色颠倒，即可实现阴文文字效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{font-size:50px; color: white} .b1{text-shadow:-1px 0 #000, 0 1px red, 1px 0 blue,

text-shadow阴影效果

阅读更多关于 text-shadow阴影效果

一、定义解释 1、属性 box-shadow是css3的一个新属性 2、参数 box-shadow的六个参数（1）h-shadow：必需、水平阴影的位置、允许负值（2）v-shadow：必需、垂直阴影的位置、允许负值（3）blur：可选、模糊距离【既然是距离肯定就不会是负值，下面的也是一个道理】（4）color：可选、阴影的颜色 3、方向问题 h-shadow：正值，显示在左侧负值，显示在右侧 0，显示原文字底部 v-shadow：正值，显示的在下侧负值，显示的在上侧 0，显示在原文字底部即：X轴正直向右，Y轴正直向下，0值在文字底部二、实例说明 <div class="divTwo"> <span>Text Shadow(文本阴影)-Css3演示</span> </div> .divTwo{ width: 400px; height: 80px; background-color: white; margin-left: 50px; display: flex; align-items: center; justify-content: center; } .divTwo span{ text-shadow:0px 10px 2px #333333; } 来源： https://blog.csdn.net/zhumizhumi/article/details

理解CSS边框border

阅读更多关于理解CSS边框border

前面的话边框是CSS盒模型属性中默默无闻的一个普通属性，CSS3的到来，但得边框属性重新焕发了光彩。本文将详细介绍CSS边框基础样式边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关 border: border-width border-color border-style border: 1px solid red; 【边框样式】如果一个边框没有样式，边框将根本不会存在关于虚线dashed，在chrome/firefox下，虚线宽高比是3/1；而在IE下，虚线宽高比为2/1。所以在IE下虚线显得比较密关于点线dotted，在chrome下，点线是方点；而在IE/firefox下，点线是圆点 border-style:none(默认) border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种) 【边框宽度】边框的宽度不能为负，不能指定为百分比值。这是因为，边框并不会因为设备尺寸变大，所以百分比单位并不符合语义。类似地，还有outline、box-shadow、text-shadow等边框宽度支持3个关键字：this/medium/thick，分别是1px、3px、5px，且medium为默认值

box-shadow阴影效果

阅读更多关于 box-shadow阴影效果

一、定义解释 1、属性 box-shadow是css3的一个新属性 2、参数 box-shadow的六个参数（1）h-shadow：必需、水平阴影的位置、允许负值（2）v-shadow：必需、垂直阴影的位置、允许负值（3）blur：可选、模糊距离【既然是距离肯定就不会是负值，下面的也是一个道理】（4）spread：可选、阴影的大小（5）color：可选、阴影的颜色（6）inset：可选、内阴影【不写时默认是外阴影】 3、方向问题 h-shadow：正值，显示的位置是右侧边框的阴影负值，显示的位置是左侧边框的阴影 v-shadow：正值，显示的位置是下侧边框的阴影负值，显示的位置是上侧边框的阴影二、实例这种知识点直接靠例子就可以掌握的比较清楚了 1、借鉴文章博客：菜鸟教程： https://www.runoob.com/cssref/css3-pr-box-shadow.html 来源： https://blog.csdn.net/zhumizhumi/article/details/98982658