做公司网页,一键优化win10,东营建设信息网最新消息,内部网站建设依据文件1.阴影分为文本阴影和盒子阴影
我们使用text-shadow属性为文本添加阴影效果#xff0c;使用结构伪类为第一个子元素p添加阴影效果#xff1b; 水平偏移量为负值时#xff0c;表示阴影向左偏移#xff1b;
#xfeff;垂直偏移量为负值时#xff0c;表示阴影向上偏移。 …1.阴影分为文本阴影和盒子阴影
我们使用text-shadow属性为文本添加阴影效果使用结构伪类为第一个子元素p添加阴影效果 水平偏移量为负值时表示阴影向左偏移
垂直偏移量为负值时表示阴影向上偏移。
盒子阴影与文本阴影的使用方法相似但盒子阴影主要用于给元素框添加阴影效果。
盒子阴影box-shadow 下面的是阴影和状态伪类的结合使用hover是悬浮的时候显示 在盒子阴影中默认阴影在边框外即阴影向外扩散。 我们还可以使用inset属性值使得阴影落在盒子内部这样看起来就像是内容被压低了。 2.转换
transform属性用于设置元素的移动旋转缩放和倾斜等变换操作。
移动属性值由两部分构成第一部分是translate函数------------第二部分为translate()函数的参数两个参数以逗号隔开。
第一个参数表示水平移动距离正数向右负数向左
第二个参数表示垂直移动距离正数向下负数向上。 在transform属性中使用rotate()函数可以实现元素的旋转。
rotate()函数包含一个参数代表旋转的角度角度由数值和单位组成。
示例中将第二张图片顺时针旋转90度其中deg是英文degree(角度)的简写。
注意角度为正表示顺时针旋转角度为负表示逆时针旋转。 在transform属性中使用scale()函数可以使元素沿着水平方向和垂直方向缩放。
scale()函数包含两个参数依次表示元素水平方向和垂直方向的缩放比例。
示例中第二张图片的水平和垂直方向都放大1.5倍。 在transform属性中使用skew()函数可以使元素沿着水平方向和垂直方向倾斜。
skew()函数包含两个参数依次表示元素水平方向和垂直方向的倾斜角度。
示例中将第二张图片在水平方向倾斜了30度垂直方向倾斜了10度。 transform属性支持多个属性值同时使用属性值间用空格隔开。
