css3常用属性

最新推荐文章于 2023-06-25 01:10:53 发布

程序媛啊啊啊

最新推荐文章于 2023-06-25 01:10:53 发布

阅读量1k

点赞数

分类专栏：前端css 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_44379204/article/details/105278875

版权

前端css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、CSS3 边框

1.1 border-image

border-image: source slice width outset repeat|initial|inherit;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

1.2 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

eg:

box-shadow: 10px 10px 10px 5px #888888;

1.3 border-radius

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同
eg:

  <body>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
   </body>
   div{
        display: inline-block;
        float: left;
        margin: 10px;
        width: 200px;
        height: 100px;
        background-color: limegreen;
    }
    #a{
        border-radius: 25px;
    }
    #b{
        border-radius: 25px 20px;
    }
    #c{
        border-radius: 25px 20px 10px;
    }
    #d{
        border-radius: 25px 20px 10px 5px;
    }

在这里插入图片描述

2、CSS3 背景

新的背景属性：

属性	描述
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

3、CSS3 渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

3.1 Linear Gradients

1、使用线性

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

direction:to right; to bottom right;
eg:

background-image: linear-gradient(to bottom right,#ff0000,#00ff00);

2、使用角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

angle:-90deg; 90deg;
eg:

background-image: linear-gradient(45deg, red, yellow);

3、重复渐变repeating-linear-gradient

 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

3.2 Radial Gradients

background-image: radial-gradient(shape size at position, start-color, …, last-color);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
eg:

/* 径向渐变 - 颜色结点均匀分布*/
background-image: radial-gradient(red, yellow, green);
/* 径向渐变 - 颜色结点不均匀分布*/
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
/* 形状为圆形的径向渐变*/
background-image: radial-gradient(circle, red, yellow, green);
/* 一个重复的径向渐变*/
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

4、CSS3 文本

4.1 text-align-last

设置如何对齐最后一行或紧挨着强制换行符之前的行

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

4.2 text-overflow

规定当文本溢出包含元素时发生的事情

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。(谷歌不兼容)

4.3 word-break

规定非中日韩文本的换行规则

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

4.4 word-wrap

允许对长的不可分割的单词进行分割并换行到下一行

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）
break-word	在长单词或 URL 地址内部进行换行。

5、css3字体

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
} 
div
{
    font-family:myFirstFont;
}

6、CSS3 2D 转换

transform属性

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

 transform: translate(10px, 10px);

在这里插入图片描述

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

 transform: rotate(30deg);

在这里插入图片描述

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

transform: scale(1.5,2);

在这里插入图片描述

skew() 方法
transform:skew( [,]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。

在这里插入图片描述

transform: skew(30deg,20deg);

7、CSS3 3D 转换

3D转换与2D转换一致，只不过比2D多了个一个"Z"轴的参数。

8、CSS3 过渡

transition：transition-property transition-duration transition-timing-function transition-delay,transition-property transition-duration transition-timing-function transition-delay,…;

属性	描述
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

   transition: width 2s linear 1s,background-color 2s;

9、CSS3 动画

动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal” ((reverse 动画反向播放。alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。)alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

	@keyframes myfirst{
        from {background: red;}
        to {background: yellow;}
    }
 	@keyframes myfirst2
	{
	    0%   {background: red;}
	    25%  {background: yellow;}
	    50%  {background: blue;}
	    100% {background: green;}
	}
    div{
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        animation: myfirst 1s;
        background-color:lightgreen;
        animation: myfirst 5s linear 2s infinite alternate;
    }

10、CSS3 多列

多列属性

描述	属性
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列（balance 列长短平衡；auto 列顺序填充；）
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写

div{
    column-count: 3;
    column-fill: balance;
    column-gap: 20px;
    column-rule: 5px darkgoldenrod dotted;
}

在这里插入图片描述

11、CSS3 弹性盒子

CSS3 弹性盒子属性

属性	描述	常用值
display	指定 HTML 元素盒子类型。	block、flex、inline-block、inline、table
flex-direction	指定了弹性容器中子元素的排列方式	row、row-reverse、column、column-reverse、
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式	flex-start、flex-end、center、space-between、space-around
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式	stretch、center、flex-start、flex-end、baseline
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。	nowrap、wrap、wrap-reverse
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐	stretch、center、flex-start、flex-end、space-between、space-around
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。	number
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。	auto、stretch、center、flex-start、flex-end、baseline
flex	设置弹性盒子的子元素如何分配空间。	flex-grow 、lex-shrink 、flex-basis、auto

12、CSS3 多媒体查询

多媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等
speech	用于屏幕阅读器

@media screen and (min-width: 480px) {
    body {
        font-size:18px;
    }
}

程序媛啊啊啊

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3常用属性

1、CSS3 边框1.1 border-imageborder-image: source slice width outset repeat|initial|inherit;值描述border-image-source用于指定要用于绘制边框的图像的位置border-image-slice图像边界向内偏移border-image-width图像边界的...
复制链接

扫一扫