边框,背景,边距,溢出

css边框属性

border:宽度 样式 颜色;
border-color;
border-style; 边框样式:solid实线,dotted点状线,dashed虚线
border-width:所有边框设置宽度
border-left-color:设置左边框的颜色
border-left-style:设置左边框的样式
border-left-width:设置左边框的宽度,
CSS3的样式
border-radius:圆角处理
box-shadow: offset-x offset-y blur spread color position;(属性接收一个由5个部分组成的值)
 x轴偏移 y轴偏移blur 模糊程度 spread 阴影的尺寸 color 颜色 inset内阴影  设置或检索对象阴影  
     <style type="text/css">
.box{
  float: left;

  background: #888;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.outer-box-shadow{
  box-shadow: 10px 10px yellow;
}
.inner-box-shadow{
  box-shadow: 10px 10px yellow inset;
}
</style>
<div class="box outer-box-shadow"></div>
<div class="box inner-box-shadow"></div>
</div>

背景属性:background

*background-color: 背景颜色
*background-image: 背景图片
*background-repeat:是否重复,如何重复?(平铺)
*background-position:定位

css3的属性                
*background-size: 背景大小,如 background-size:100px 140px;

多层背景:(了解)
background: 
            url(./images/game/map_14.gif) no-repeat 100px 200px,
            url(./images/game/map_17.gif) no-repeat 150px 200px,
            url(./images/game/map_03.gif);

元素溢出

当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

overflow的设置项:

1、visible 默认值。内容不会被修剪,会呈现在元素框之外。 2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。 3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

CSS边距:

*内补白(内补丁)

padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top: 检索或设置对象顶边的内部边距
padding-right: 检索或设置对象右边的内部边距
padding-bottom:检索或设置对象下边的内部边距
padding-left: 检索或设置对象左边的内部边距

*外补白(外补丁)

margin: 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top: 检索或设置对象顶边的外延边距
margin-right: 检索或设置对象右边的外延边距
margin-bottom: 检索或设置对象下边的外延边距
margin-left: 检索或设置对象左边的外延边距
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值