CSS:加边框内容收缩解决

在div里面内嵌了一个子div。在给子div加点击加边框和去边框效果时,会发现,当子div加上边框时,里面的内容就往里缩。这个原因是子div的大小默认是占满父div内容的,当加了边框后,子div里面显示内容的地方就变小了,所以就内容显示就往里缩。解决这个问题很简单,就是在设置加div时,同事扩展一下子div的范围。

最早加边框是这么设置的:div.son{border:1px solid black;}

解决往里缩:

div.son{

border:1px solid black;

margin:-1px;

}

这样内容显示就不会往里缩了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
box-shadow是一种CSS属性,用于在元素周围创建一个阴影效果。它可以用于盒子、文本、图片等元素上。 box-shadow属性的语法如下: ``` box-shadow: h-shadow v-shadow blur spread color inset; ``` 其中,每个值的具体含义如下: - h-shadow:水平阴影的位置,可正可负,表示向右或向左偏移阴影。例:10px表示阴影向右偏移10像素,-5px表示阴影向左偏移5像素。 - v-shadow:垂直阴影的位置,可正可负,表示向下或向上偏移阴影。例:5px表示阴影向下偏移5像素,-3px表示阴影向上偏移3像素。 - blur:模糊距离,可选值是一个长度值。例:3px表示阴影的模糊效果为3像素。 - spread:阴影的尺寸扩展或收缩值,可选值是一个长度值。例:2px表示阴影扩展或收缩2像素。 - color:阴影的颜色,可以使用具体的颜色值或者关键字。例:"#000"表示黑色阴影。 - inset:可选值,如果存在,则阴影在边框内部(内阴影),否则在边框外部(外阴影)。 例如,要创建一个具有5像素水平偏移、3像素垂直偏移、10像素模糊、0扩展和黑色颜色的外阴影,可以使用以下代码: ```css box-shadow: 5px 3px 10px 0 #000; ``` 你还可以使用逗号分隔多个阴影来创建叠效果。例如,要创建两个不同颜色的阴影,可以使用以下代码: ```css box-shadow: 3px 3px 5px #000, -3px -3px 5px #fff; ``` 希望这能帮到你!如果你有更多问题,请继续提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值