padding(内边距), border(边框),盒子阴影,文本阴影

一,padding(内边距)

1,padding:内边距

        作用:撑大盒子,调整内容与边框之间的间距。

        距离:从自身的边框到内容之间的间距。

        语法:padding:通过值控制不同的外边距,值1~4个.

              padding-top/right/bottom/left: 设置单边内边距;

              padding-block/inline-start/end:设置单边内边距;

二,border(边框)

1,语法:

            边框样式: border-style:dashed虚线 dotted点状线 double双线 solid实线 groove3D凹槽效        果 ridge3D垄起效果;

            边框宽度:border-widht:number + 单位;

            边框颜色:border-color:;

2,常用语法:

            border:边框宽度 边框样式 边框颜色;

            单边框设置:border-top/right/bottom/left:边框宽度 边框样式 边框颜色;

3,圆角设置:

        语法:

            border-radius:值1~4个,控制不同角的弧度。

            border-top/bottom-left//right:设置单元角弧度。

三,盒子阴影

1, 语法:box-shadow:

            第一个值:阴影距离盒子的左右距离,可为负数。

            第二个值:阴影距离盒子的上下距离,可为负数。

            第三个值:阴影的清晰度,值越大会以椭圆的形状往外渐变扩散,不能为负数。

            第四个值:阴影的颜色。

            第五个值:inset ,调整为内外侧阴影。

四,文本阴影

1,语法:text-shadow:

            第一个值:阴影距离文本的左右距离,可为负数。

            第二个值:阴影距离文本的上下距离,可为负数。

            第三个值:阴影的清晰度,值越大会以椭圆的形状往外渐变扩散,不能为负数。

            第四个值:阴影的颜色。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值