雨落辰潇-文档站

Appearance

CSS3 新增盒子相关样式 ​

盒子尺寸 ​

  • box-sizing 定义盒子模型的尺寸解析方式

    css
    值：
content-box(默认)    
border-box （最终大小就是设置大小）

  • resize 否允许用户缩放，调节元素尺寸大小

    css
    值：
none： 不允许用户调整元素大小。 (默认)
both： 用户可以调节元素的宽度和高度。 
horizontal： 用户可以调节元素的宽度     
vertical： 用户可以调节元素的高度。

① display 介绍 ​

display 属性拥有更多的值，可以让任何元素设置任何样式。

css
值：
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。（CSS2） 
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

display案例

css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .item{
            display: list-item;
            list-style-type: disc;
         }

    </style>
</head>
<body>
    <ul class="news">
        <p class="item">我应十妄秦者无老，问本倒，若会竟，快使。</p>
    </ul>
</body>
</html>

② box-sizing 属性 ​

通过该属性可以调整元素宽高的设置规则：

css
content-box		width和height设置的内容宽高，默认值
border-box		width和height设置的总宽总高，也称为怪异模式

③ 盒子阴影 box-shadow ​

盒子阴影 ​

box-shadow 设置元素的阴影

css
box-shadow:<length>① <length>②;
box-shadow:<length>① <length>② <color>;
box-shadow:<length>① <length>② <length>③;
box-shadow:<length>① <length>② <length>③ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color> inset;
box-shadow:<length>① <length>② inset;

取值：

none： 无阴影

<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 <length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 <color>： 设置对象的阴影的颜色。 inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

可以设定多组效果，每组参数值以逗号分隔

css
box-shadow: x偏移 y偏移 模糊值 外延值 颜色 内阴影;
css
/* 设置阴影的偏移位置 x方向 y方向 */ 外阴影的位置默认在右下
box-shadow: 10px 5px;

/* 设置阴影的 偏移位置 颜色 */ 默认的颜色是字体color的颜色
box-shadow: -5px 10px #ccc;
box-shadow: #099 -5px -10px;

 /* 设置阴影的模糊值 */
box-shadow: 5px 5px 10px;
/* 设置阴影的模糊值 颜色 */
box-shadow: 5px 5px 10px #ccc;
box-shadow: rgba(0,0,0,.3) 5px 5px 10px;
/* 阴影不偏移 靠模糊值向四周扩散 */
box-shadow: 0 0 15px #000;

/* 设置外延值 */
box-shadow: 3px 3px 5px 1px #080;

/* 设置内阴影 */ 默认的位置在左上，多用于设置输入框
box-shadow: 10px 10px inset;
box-shadow: -10px 10px inset;
box-shadow: inset -10px -10px #000;

/* 多阴影 */
box-shadow: 5px 0 5px #f00,
            0 5px 5px #080,
            -5px 0 5px #088,
            0 -5px 5px #880;
把元素设置为圆的
border-radius: 50%;

④ 不透明度 opacity ​

给元素设置 opacity 属性可以让元素整体半透明，该属性的值取 0 到 1之间的小数，数字越大越不透明，1表示完全不透明，0表示完全透明。

  • opacity 检索或设置对象的不透明度。 值是0~1的范围。

  • 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

    css
    filter: alpha(opacity=透明值)

⑤ 粘连定位 ​

给元素设置 position:sticky; 该元素粘连定位，当页面滚动，该元素顶部触碰到视口顶部的时候，会固定定位在那个位置。

css
需要和 top属性 联动使用

盒子倒影 ​

-webkit-box-reflect 倒影 （仅webkit 支持）

css
值: box-reflect：none | direction offset? mask-box-image?

取值：

direction:

css
above： 指定倒影在对象的上边 
below： 指定倒影在对象的下边 
left： 指定倒影在对象的左边 
right： 指定倒影在对象的右边

offset:

css
<length>： 用长度值来定义倒影与对象之间的间隔。可以为负值 
<percentage>： 用百分比来定义倒影与对象之间的间隔。可以为负值

mask-box-image:

css
none： 无遮罩图像 
<url>： 使用绝对或相对地址指定遮罩图像。 
<linear-gradient>： 使用线性渐变创建遮罩图像。 
<radial-gradient>： 使用径向(放射性)渐变创建遮罩图像。 
<repeating-linear-gradient>： 使用重复的线性渐变创建背遮罩像。 
<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建遮罩图像。

Copyright © 2024 雨落辰潇