1.圆角

语法案例：

.box {

width: 300px;

height: 300px;

border: 3px solid red;

border-radius: 150px; (按顺时针的顺序去设置)

左上角右上角右下角左下角

值越大，圆角越圆

利用border-radius做一个圆

元素的宽高必须一致

圆角的半径为元素宽度的一般，或者直接设置圆角半径为50%

}

2、盒子阴影

语法box-shadow：inset（outset）x-offset y-offset blur-radius color

.box {

width: 300px;

height: 300px;

border: 3px solid red;

box-shadow: inset 5px 4px

box-shadow: inset 11px 10px 30px pink;

}

inset阴影类型内阴影 outset外阴影默认为外阴影

x-offset x轴卫衣，指定阴影水平位移量

y-offset y轴卫衣，用来指定阴影垂直位移量

blur-radius 阴影模糊半径阴影向外模糊的模糊范围

color 阴影颜色，定义绘制阴影时所用颜色

3.背景设置

.box{

width: 200px;

height: 300px;

background-repeat: no-repeat;

border:1px solid red;

background-size: 100% 100%;

如果只给一个值第二个是auto

length 设置背景图片宽高，第一个值设置宽度，第二个值设置高度

background-size: cover;

cover会保持纵横比会覆盖背景定位区域但是图片展示不全

background-size: contain

会保持纵横比不会完全覆盖背景定位区域

}

.box {

width: 200px;

height: 300px;

border: 10px dashed red;

padding: 20px;

background-origin:padding-box;

背景图像相对于内边距来定位

背景图像会贴在内边距来展示也是默认的。

background-origin: border-box;

背景图像相对于边框盒来定位

背景图像会贴在边框的内部来展示

/* background-origin:content-box; */

/* 背景图像会贴在内容的内部来展示 */

}

.box1 {

width: 200px;

height: 300px;

border: 10px dashed red;

padding: 20px;

background-clip: padding-box;

背景被剪裁到内边距框

在背景重复出现的时候background-clip不会在边框的内容展示会在边框的外部完全展示出来，也可以理解为边框内部背景图的部分被剪裁了

background-clip: border-box;

背景图像被剪裁到边框盒

background-clip: content-box;

}

CSS圆角、盒子阴影和背景设置相关推荐

ie8浏览器html圆角问题,css圆角和阴影兼容问题（ie7,ie8）
Document .box { background-color: #f0f0f0; width: 740px; height: 40px; border: 1px solid #d7d7d7; -m ...
CSS / 圆角边框+阴影+浮动
目录圆角边框盒子阴影文字阴影传统网页布局的三种方式浮动浮动特性浮动元素经常和标准流父级搭配使用常见的网页布局案例浮动布局注意点圆角边框语法:border-radius: 半径; ...
前端入坑第六弹——CSS的复合选择器和背景设置
又是好几天没更新了,今天我来介绍一下CSS里面的复合选择器以及网页中的背景设置. 复合选择器比起一般的基础选择器,复合选择器能够更准确.更高效地定位网页元素. 后代选择器后代选择器可以对于父元素里 ...
CSS 边框圆角盒子阴影圆角 solid dotted dashed
用来单独设置覆盖边框阴影圆角
CSS box-shadow 盒子阴影属性
实例向 div 元素添加 box-shadow: div { box-shadow: 10px 10px 5px #888888; } 亲自试一试页面底部有更多实例. 浏览器支持表格中的数字注明 ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...
CSS再学习（如何设置背景图片透明，弹性盒子，盒子阴影）+HTML冷门知识
目录 css组合器后代选择器 (空格) 子选择器 (>) 相邻兄弟选择器 (+) 通用兄弟选择器 (~) CSS伪类选择器什么是伪类? 能干什么? 注意事项鼠标悬浮提示的功能 first- ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...

CSS圆角、盒子阴影和背景设置

1.圆角

2、盒子阴影

3.背景设置

CSS圆角、盒子阴影和背景设置相关推荐

最新文章

热门文章