css3 - 背景与边框

Posted 前端攻城狮herry菌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 - 背景与边框 相关的知识,希望对你有一定的参考价值。

背景与边框 (1)
背景定位

最近思考了一下,个人的技术方面还是有待提高的。最大的一个问题就是写结构与样式需要花费很多时间,业务方面基本没什么问题。所以技术方面还是要做多一些提升与总结(做技术还是更要提高技术)。因此,今天起准备下班时间花点时间总结下css3方面的知识点。以前虽然有做一些总结,但是总结完之后就很少再回顾了,真正有用到的时候,导致一时半会想不起来,所以回顾也很重要。

案例+总结

//
做到:总结与回顾
//


background-position扩展


css3 - 背景与边框 (1)

css3 - 背景与边框 (1)

图标右边距离10px,下边距离10px


calc函数


css3 - 背景与边框 (1)

css3 - 背景与边框 (1)

100%的宽度,-80px,右边就空出80px

写法上:+ - * / 两边必须有留空


background-origin: content-box;


css3 - 背景与边框 (1)

css3 - 背景与边框 (1)

其他不变,图标右边和下边距离更远了

position的位置从padding之后开始计算


学可以学多点,总结成文章还是比较麻烦的。所以可能也没法一下写太多。


每次内容少,次数多就好。


css3 - 背景与边框 (1)
css3 - 背景与边框 (1)


以上是关于css3 - 背景与边框 的主要内容,如果未能解决你的问题,请参考以下文章

CSS3的边框圆角背景

CSS3 新增属性(边框,背景,文字,颜色属性)

CSS3:元素的边框背景和大小

css3:与背景的相关样式

css和css3的区别

请问一下CSS3样式中如何让背景渐变与背景图片共存啊!