0
点赞
收藏
分享

微信扫一扫

css背景以及伸缩模式布局笔记

westfallon 2022-03-14 阅读 95
csssafarifirefox

引入外部字体

@font-face{
font-family: myFirstFont;
src: url('font/icomoon.ttf')
	 ,url('font/icomoon.eot') ; /* IE9 */ 
}

div::after{
	font-family:myFirstFont;/*一定要和声明的font-family: "myFirstFont"相同 否则没有效果;*/
	/* content: '\e909'; */
	content: '\e90b';
	font-size: 100px;
	color: blue;
}

matrix

  • matrix()方法和2D变换方法合并成一个。
  • matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

transition 具体属性

transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;

animation alternate[交替] infinite[无限]

  • 先正到反 循环交替
div{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

 @keyframes myfirst{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

 @-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}

多列 column-count

  • 分为3列
.newspaper
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
}
  • 指定列与列之间间隙 olumn-gap
  • column-rule-style: 在列与列之间添加线型;
  • column-rule-width: 边框厚度
  • -webkit-column-rule-color:边框颜色
  • column-width: 指定列的宽度

元素跨越所有的列

  • column-span:all;
	.newspaper{
	column-count:3;
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */

	}
	h2{
	column-span:all; /* 下实例指定 <h2> 元素跨越所有列 */
	-webkit-column-span:all; /* Safari and Chrome */
}

<div class="newspaper">
	<h2>英国维斯米斯特教堂碑文</h2>
	当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

resize: 调整大小

  • Firefox, Safari,和 Chrome 兼容 resize 属性
div{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}

outline-offset:外边框线

div{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
}

图像属性

.blur {-webkit-filter: blur(4px);filter: blur(4px);}/* 模糊 */
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);} /* 亮度 */
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} /* 差异 */
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} /* 灰度 */
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} /* 色相 */
.invert {-webkit-filter: invert(100%);filter: invert(100%);} /* 反转 */
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} /* 透明度 */
.saturate {-webkit-filter: saturate(7); filter: saturate(7);} /* 饱和度 */
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} /* 暗度 */
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

在这里插入图片描述

按钮禁用 disabled

  • css样式 使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

按钮动画

  • css样式
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

 .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

 .button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

 .button:hover span {
  padding-right: 25px;
}

 .button:hover span:after {
  opacity: 1;
  right: 0;
}
  • html 布局
<button class="button" style="vertical-align:middle"><span>Hover </span></button>

圆角线框

兄弟 +

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

direction: rtl;

伸缩布局

  • flex-direction: row-reverse; 行反向
	display: flex;  
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
  • flex-direction: column; 竖向排列
	display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  • 竖向反向排列 column-reverse
	display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  • 最后一个从右边排列 flex-end
	display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  • 水平居中排列 center
	display: flex;
    -webkit-justify-content: center;
    justify-content: center;
  • 平分行内元素之后与另一个元素之前的空白缝隙
	display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  • 平分行内元素之前与另一个元素之后的空白缝隙
	display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
  • 自动拉伸高适应 stretch
	display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
  • 从左上边开始排列 flex-star
	display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  • 从左下边开始排列 flex-end
	display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
  • 垂直居中排列 center
	display: flex;
    -webkit-align-items: center;
    align-items: center;
  • 默认左上位置 baseline
	display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
  • 平均分配父类的宽 不可以换行 nowrap
	display: flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
  • 必要时换行 wrap
	display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  • 左下位置反向 wrap-reverse
 display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  • 实例 垂直居中
	display: flex;
    -webkit-flex-wrap: wrap; /* 必要时换行 */
    flex-wrap: wrap;
    -webkit-align-content: center;  /* 垂直居中 */
    align-content: center;
  • 排序 order 值越小越靠前
 .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 .first {
    -webkit-order: -1;
    order: -1;
}

小技巧

在这里插入图片描述

伸缩布局平均分空间

	display: -webkit-flex;
    display: flex;
	/* ... */
	-webkit-flex: 2;
	flex: 2;
举报

相关推荐

CSS-伸缩布局

CSS3html取值默认值Html/CSS前端开发

CSS的布局：默认文档流、浮动布局、定位布局、伸缩盒布局

htmlcss前端

CSS布局基础（字体，文本，背景）

csshtml前端

CSS Flex 布局的引入背景

应用程序css屏幕尺寸系统/运维

浮动布局、伸缩盒布局、定位布局

学习htmlcss

CSS的布局模式

java算法备忘录模式

vue css 链式布局模式

nginx

CSS之伸缩盒

html前端

CSS特性、背景属性和显示模式

人工智能大数据算法

CSS基础学习——元素显示模式&背景

css前端html
0 条评论