背景和边框的相关样式

1.新增的背景属性

属性	功能
background-clip	指定背景的显示范围
background-origin	指定绘制背景图像时的起点
background-size	指定背景中图像的尺寸
background-break	指定内联元素的背景图像进行平铺时的循环方式

background-clip
用法：
background-clip:border-box/padding-box/content-box;
border-box为默认值，背景从border区域向外裁剪，超出border部分将被裁剪掉
padding-box背景从padding区域向外裁剪，超出border部分将被裁剪掉
content-box背景从content区域向外裁剪，超出border部分将被裁剪掉

 div{width: 300px;height: 150px;border: dashed 30px green;padding: 30px;background-color: aqua;margin: 20px auto;background-clip: border-box;}

background-clip: padding-box;

background-clip: content-box;

background-origin
用法：
background-origin:border-box/padding-box/content-box;

background-break
background-break:continuous;忽略区域之间的间隔空隙
background-break:bounding-box;重新考虑区域之间的间隔
background-break:each-box对每一个独立的标签区域进行背景的重新划分

2.显示多个背景图片
background-image:url(),url(),url();
从上往下

3.圆角边框
border-radius属性
border-radius:10px 20px;
第一个半径是左上与右下
第二个半径是左下与右上
border-top-left-radius:10px;左上

4.图像边框
border-image:url() 边距;
指定四条边背景的显示方法
border-image:url() 上边距右边距下边距左边距/border宽度 topbottom leftright;
在显示的方法中可以指定的值有repeat,stretch和round
round将图像平铺显示，若最后一张不能完全显示，则不显示图像，把之前的图像扩大。
如，border-image:url() 10px 20px 30px 40px/10px repeat round;

背景和边框的相关样式相关推荐

corners边框_安卓中设置(shape)圆角背景和边框(stroke)相关的问题
最近开发的项目中使用的圆角背景和边框比较多,基本都是使用shape文件和.9图片实现的.但在实现的过程中也是会出现一些小问题,这篇随笔会总结下来其中遇到的问题. 一,圆角大小不一致 1,四周圆角都为1 ...
java样式是什么_java css样式 css样式的种类选择器文本相关样式背景相关样式边框盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS揭秘（二）背景与边框
Chapter2 背景与边框 1. 半透明边框基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
css随记01编辑技巧,背景与边框
代码优化一个按钮的例子,使其值同比例变化; button{color: white;background: #58a linear-gradient(#77a0bb, #58a);padding: ...
CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...

背景和边框的相关样式

背景和边框的相关样式

背景和边框的相关样式相关推荐

最新文章

热门文章