分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

CSS高级技巧(二)背景和边框

发布时间:2023-09-06 02:19责任编辑:沈小雨关键词:CSS

box-shadow

box-shadow属性支持多个阴影,用逗号分隔

使用inset时,需要同时增加相应的内边距

边框内圆角的实现可以用该属性配合outline来实现,因为box-shadow时贴着圆角的,而outline显示为直角,此方案可能会在以后的提案中不可行

outline

可以实现boxshadow无法实现的其他样式的边框

可以通过内置负值的outline-offset在元素内部实现一个虚线或其他样式的边框

background-position

可以指定具体方向上的偏移量,但同时也需要注意提供回退方案

background: url(code-pirate.svg) no-repeat bottom right #58a;background-position: right 20px bottom 10px;

background-origin

改变背景图片展示的盒子,默认是padding-box,可以改为content-box或者border-box

calc()

在设置背景图片的展示边距时,可以通过calc()函数一步到位,但需要注意在运算符的两侧各加一个空白符,此目的是为了向前兼容,以后可能会允许关键字的出现

CSS高级技巧(二)背景和边框

原文地址:https://www.cnblogs.com/goOtter/p/9840257.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved