CSS3使用教程

CSS3S使用教程

1.边框

圆角边框的属性

border-radius:      ;
一个值为四个角都添加
两个值,第一个值为左上和右下,第二个为坐下与右上
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

css3边界图片

boder-image: url(地址) 宽度 stretch; 拉伸
border-image:url(地址) 30 30 round; 平铺

2.背景

1. 
background: url(地址) 位置 是否重复;
background: url(地址) right bottom no-repeat,url(地址) left top repeat;
2.background-size:80px 60px; 图片大小
3.background-origin:content-box;背景图片在的位置
  content-box, padding-box,和 border-box
4.background-clip : 裁剪位置与bcakground-origin一样;

3.渐变

线性渐变

background-image: (repeating-重复)linear-gradient(to 方向, color-stop1, color-stop2, ...);
background-image: linear-gradient(数字deg, color-stop1, color-stop2);

径向渐变

background-image:(repeating-重复)radial-gradient((circle 或 ellipse) , start-color, ..., last-color);

4.文本效果

text-shadow :5px 5px 5px #ff0000;水平阴影,垂直阴影,模糊的距离,以及阴影的颜色
box-shadow :   ;制作卡片效果
text-overflow;: ellipsis or clip;文字溢出的方法,第一个会有...的效果,第二个直接截断
word-wrap :break-word; 允许单词换行,盒子宽度需定义
word-break: keep-all or break-all ;第一个保持单词完整,第二个按盒子宽度直接换行。

5.二D转换

transform: ;
	translate( 50px, 50px)   x,y偏移量
	rotate(30deg) 按元素旋转
	scale(2,3) 盒子大小是原来的宽两倍,高三倍
	skew(30deg,20deg)两个参数值,分别表示X轴和Y轴倾斜的角度
	matrix(0.866,0.5,-0.5,0.866,0,0)六个参数,包含旋转,缩放,移动(平移)和倾斜

6.过渡

transition-property:width;
	transition-duration:1s; 过渡花费的时间
	transition-timing-function:linear;过渡效果的时间曲线,默认ease
	transition-delay:2s; 过渡延迟
可以简写
transition: width 1s linear 2s;

7.动画

语法:
animation: myfirst 5s linear 2s infinite alternate; 名字 周期时间 速度曲线 延迟开始 动画播放次数 下一周期逆向播放

8.多列

column-count		指定元素应该被分割的列数。
column-fill			指定如何填充列
column-gap			指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span			指定元素要跨越多少列
column-width		指定列的宽度
columns	column-width 与 column-count 的简写属性。

9.弹性盒子

盒子位置:
flex-direction: row | row-reverse | column | column-reverse
row:左对齐,默认的排列方式。
row-reverse:右对齐
column:纵向排列
column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
内容对齐:
justify-content: flex-start | flex-end | center | space-between | space-around

内容盒子的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
上面 下面 中间 与flex-start等效
内容盒子的换行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
nowrap:单行可能会溢出容器
wrap:弹性容器为多行,子项内部会放生断行
wrap-reverse :反转 wrap 排列。
align-content 属性用于修改 flex-wrap 属性的行为,但它不是设置弹性子元素的对齐,而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

10.网络布局

网格布局:一个父盒子多个子盒子
display: grid;
grid-template-columns: auto,auto...;设置几列
grid-template-columns: 1fr 1fr 1fr; fr 单位来帮助我们创建灵活的网格轨道
grid-template-rows: 100px 300px;设置行高,第一个为第一行行高.....
网格间距:
grid-column-gap 
grid-row-gap 
grid-gap :  ;简写两个值

img

grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。
	grid-column-start: 1;
 	grid-column-end: 3;
grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。
	grid-column-start: 1;
 	grid-column-end: 3;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值