HTML基础:CSS3

  • border-radius
    圆角属性

  • box-shadow
    阴影
    单位%:border-radius: 30%;
    单位px: border-radius: 0px 10px 50px 30px;

    添加内阴影inset:box-shadow: 10px 10px 20px black inset;

  • background
    background: url(img/baby_b2.jpg) no-repeat center;:背景地址 背景不重复 背景居于整个div(红色边框)的中心
    (background-repeat:no-repeat;)

  • 背景渐变 linear-gradient:相当于一个方法
    background: linear-gradient(#003322,#ff0000,#99ff00);:默认从上到下
    background: linear-gradient(to bottom right,#003322,#ff0000,#99ff00);:从左到右
    background: linear-gradient(to right,#003322,#ff0000,#99ff00);:从左上到右下
  • background-size: length|percentage|cover|contain;
    background-size:80% 100%;: 背景占满当前标签或者父集div标签的百分比(长,宽)

background-size:200px 200px;:通过长宽的px 手动控制背景的大小

background-size:contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size:cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

  • background-origin
    可选:content-box:按内容填充背景

border-box:按边框(背景也占满边框)

padding-box:按内边距(背景不占边框)

  • overflow
    overflow:hidden:溢出部分隐藏
    在这里插入图片描述

overflow:overlay; :超出部分滑动可见
overflow:auto; : 同上
在这里插入图片描述

  • transform: skew(ax, ay);
    单位:deg
    含义:倾斜
    举例:transform: skew(30deg,30deg);
    点它
    transform: skew(30deg,0deg); :图像y轴方向的线不动,x轴方向的线,沿着垂直方向X轴 旋转30度

  • transition属性
    含义:简写属性,用于在一个属性中设置四个过渡属性。
    使用:写在img中,过渡效果是img:hover
    点它

  • text-shadow
    含义:基础的文本阴影效果
    举例:
    text-shadow: 0px 0px 5px #FF0000;
    水平阴影的位置:阴影 距离原字体的水平距离
    垂直阴影的位置
    模糊的距离:阴影的雾化度
    点它

  • animation
    含义:动画
    举例:animation:mymove 5s infinite; (一次性设置只能是这三个属性:名字 动画持续时间 动画播放次数)
    针对chrom浏览器:-webkit-animation:spread 5s infinite;
    点它

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值