当前位置: 首页 > Web前端 > CSS

《CSS揭秘》-背景和边框

时间:2023-03-31 11:22:45 CSS

1.为容器设置白色背景和半透明的白色边框。思路:其实设置的背景会延伸到边框所在区域的下层,可以通过background-clip属性调整背景的默认行为。background-clip属性:背景绘图区域值描述border-boxbackground被裁剪到borderboxpadding-boxbackground被裁剪到innermarginboxcontent-boxbackground被裁剪到contentboxborder:20pxsolidhsla(0,0%,100%,.5);背景:#fff;背景剪辑:填充框;2。多边框实现box-shadow解决思路:利用box-shadow的第四个参数(扩展半径)指定正负值,使投影区域变大或变小。正扩张半径加上两个零偏移量和零模糊值会产生类似于实线边界的投影。优点:可以获得更多层次的边框;适合border-radius属性以产生圆角。缺点:只能绘制一种样式的直线。box-shadow属性:给盒子添加一个或多个阴影。支持逗号分隔语法,我们可以创建任意数量的投影。box-shadow逐层叠加,第一层projection在最上面,以此类推。因此,需要定期调整扩展半径。值说明h-shadow必需。水平阴影的位置。允许负值v-shadow必需。垂直阴影的位置。允许负模糊值是可选的。模糊距离扩展是可选的。阴影颜色的大小是可选的。阴影的颜色插图是可选的。将外阴影(开始)更改为内阴影box-shadow:h-shadowv-shadowblurspreadcolorinset;background:yellowgreen;box-shadow:00010px#655,00015pxdeeppink,02px5px15pxrgba(0,0,0,.5);注意:投影的行为不影响布局,也不受box-sizing属性的影响。但是,您可以使用padding或margins来额外模拟边框占用的空间。投影出现在元素的外边缘,不响应悬停或单击等鼠标事件。你可以在box-shadow属性中添加inset关键字,这样阴影就绘制在元素的内圆上。在这种情况下,您需要添加额外的填充以腾出足够的空间。outline方案的思路:只需要两层边框,可以先设置一层规则边框,然后加上outline(描边)属性生成外边框。优点:边框样式非常灵活。缺点:只适用于双层边框场景;边框不一定适合由border-radius属性生成的圆角。outline属性:是围绕元素画的一条线,位于border边缘的外围,可以起到突出元素的作用。值说明outline-color指定边框的颜色outline-style指定边框的样式outline-width指定边框的宽度background:yellowgreen;outline:5pxsoliddeeppink;设置box-radius值效果:通过设置outline-offset属性来控制它和元素边缘之间的距离background:#485152;outline:1pxdashed#fff;outline-offset:-10px;3.一种扩展语法方案,用于将背景图像从容器的某个角落偏移以定位background-position