前端———CSS3一些不常用却实用的属性(一)

一.transparent:隐藏边框线,这里是隐藏了右边的边框线,其他 left top bottom 一样的操作

在这里插入图片描述
二丶**.opaciiy** 元素的不透明: 把整个元素都能设置为透明 例子
未用opacity之前:
在这里插入图片描述
使用opacity之后:div背景颜色也透明 div里边的文字也透明 opacity 参数值是0~1之间。注意它background-red rgba(0,0,0,0.2)有区别 这个是背景颜色透明 里边的内容不透明
在这里插入图片描述
三丶阴影效果:box-shadow:盒子阴影:box-shadow:水平投影 垂直投影 投影模糊程度 投影大小 投影颜色 内投影inset(就是投影在里边)
盒子投影效果:box-shadow:0px 0px 10px 5px red ;水平投影 垂直投影 投影模糊程度 投影大小 投影颜色

在这里插入图片描述

文本text-shadow:文本阴影 水平投影 垂直投影 投影模糊程度 投影颜色 没有投影大小 也没有内投影
在这里插入图片描述
text-shadow:5px 5px 10px red ;文本阴影 水平投影 垂直投影 投影模糊程度

四丶
transition:给样式一个过渡效果配合transform 使用 tranform是对元素进行旋转、缩放、移动或倾斜。

在这里插入图片描述
配合伪类hover使用:过称为;当鼠标移到div的时候 触发transform:translate(100px, 100px) rotate(45deg) scale(0.2); 这个就是先水平坐标走(100px,100px) 然后旋转45度 最后缩放到原来的1.2倍 最后改变颜色
在div中加入过渡效果, transition:transform 这个进行操作2s 背景颜色2s后改变为yellow 当鼠标移走时候 按照给的时间2s 倒退回去 颜色 2s后恢复红色
效果如下;
在这里插入图片描述

在这里插入图片描述
translate(100px, 100px) rotate(45deg) 这个是移动坐标(100px,100px),之后旋转45度

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_36625232/article/details/85850959