CSS3 属性样式总结记录(图文)

CSS3 属性样式总结记录

1 、边框-背景

border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影

代码1-1 边框

div
{
	border:2px solid #11a1a1a1;
	padding:10px 40px; 
	background:#fff;
	width:300px;
	border-radius:25px;
	color:#999999
}

图片1-1

在这里插入图片描述

代码1-2 阴影

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #e1e1e1;
}

图片1-2

在这里插入图片描述

代码1-3 使用图片作为边框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round
{
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
	border-image:url(border.png) 30 30 round;
}

#stretch
{
	-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 stretch; /* Opera */
	border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里,图像平铺(重复)来填充该区域。</div>
<br>
<div id="stretch">这里,图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材:</p>
<img src="/images/border.png" />

</body>
</html>

图片1-3

在这里插入图片描述

代码1-4 背景

#rcorners3 {
    border-radius: 25px;
    background: url(/images/paper.gif);
    background-position: left top;
    background-repeat: no-repeat; repeat(铺满)
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

图片1-4

在这里插入图片描述

代码 1-5 椭圆边框

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 

图片1-5

在这里插入图片描述

代码1-6 组合图片背景

会按照顺序,找到自己的属性

给背景设置尺寸:background-size:80px 60px;

拉伸填满为:background-size:100% 100%;

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
}
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

图片1-6

在这里插入图片描述

代码1-7 背景范围

content-box, padding-box,和 border-box区域内可以放置背景图像

div
{
	border:20px solid black;
	padding:35px;
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-position:left;
}
#div1
{
	background-origin:border-box;
	background-size:100% 100%
}
#div2
{
	background-origin:padding-box;
	background-size:100% 100%
}
#div3
{
	background-origin:content-box;
	background-size:100% 100%
}

图片1-7

在这里插入图片描述

代码 1-8 背景裁切

#example1 {
    border: 10px dotted black;
    padding:35px;
    background: url("https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2565139395,3055187965&fm=85&s=F30BB044E6136FDC9D32599B0300C09C");
	background-origin: border-box;
	background-clip: content-box;
	background-repeat:no-repeat;
}

#example2 {
	
    border: 10px dashed black;
    padding:35px;
    background: url("https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2565139395,3055187965&fm=85&s=F30BB044E6136FDC9D32599B0300C09C");
	background-clip: content-box;
	background-repeat:no-repeat;
}

图片1-8

在这里插入图片描述

代码1-9 渐变

从左上角 - 右下角

#grad1 {
    height: 200px;
    background-color: red; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to bottom right, red , yellow);
}

图片1-9

在这里插入图片描述

角度渐变:

  • 即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

    • background-image: linear-gradient(-90deg, red, yellow);
  • 多个颜色节点,非均匀分布

    • background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法(必须放在最后) */
      }

重复线性渐变

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

透明渐变:

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

在这里插入图片描述

代码 1-10 径向渐变 + 设置形状

 background-image: radial-gradient(ellipse, rgba(255,0,0,0) , yellow 20% , green 30% ); /* 标准的语法(必须放在最后) */

2、文本相关

2.1 文字效果

  • text-shadow

    • text-shadow: 5px 5px 5px #FF000330;
      

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WHS47IUt-1590213508334)(C:\Users\00\AppData\Roaming\Typora\typora-user-images\1589768820129.png)]

  • box-shadow

    • div
      {
      	width:300px;
      	height:100px;
      	background-color:yellow;
      	box-shadow: 10px 10px 5px #888888; //5px 是模糊的范围 #888888 阴影的颜色
      }
      

在这里插入图片描述

  • div.card {
      width: 250px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      text-align: center;
    }
    

在这里插入图片描述

  • text-overflow

    • div.ex1 {
      	white-space:nowrap;   //文字只显示在一行
          background-color: lightblue;
          width: 110px;
          height: 110px;
          overflow: scroll;  //hidden  auto  visible(默认)
      }
      

      在这里插入图片描述

  • word-wrap

    • word-wrap:break-word; //超出部分强制换行
      

在这里插入图片描述

  • word-break

    • word-break:break-all; //允许单词拆分
      
    • word-break:keep-all;
      

附加记录

   通过调整单词之间的 距离,保证每一行,对齐。
   text-align:justify;
   text-justify:inter-word;

2.2 2D转换

  • ratate 旋转

    • {
      	width:200px;
      	height:100px;
      	background-color:yellow;
      	/* Rotate div */
      	transform:rotate(30deg);
      	-ms-transform:rotate(30deg); /* IE 9 */
      	-webkit-transform:rotate(30deg); /* Safari and Chrome */
      }
      

在这里插入图片描述

  • translate 平移

    • div#div2
      {
      	transform:translate(50px,100px);
      	-ms-transform:translate(50px,100px); /* IE 9 */
      	-webkit-transform:translate(50px,100px); /* Safari and Chrome */
      }
      

在这里插入图片描述

  • scale 缩放

    • //缩小0.5倍 
      div {
          margin: 150px;
          width: 200px;
          height: 100px;
          background-color: yellow;
          border: 1px solid black;
          border: 1px solid black;
          -ms-transform: scale(0.5,0.5); /* IE 9 */
          -webkit-transform: scale(0.5,0.5); /* Safari */
          transform: scale(0.5,0.5); /* 标准语法 */
      }
      

在这里插入图片描述

  • matrix 处理 旋转、缩放、平移 和 倾斜功能

    • 参数一:x 缩放 ; 参数 二:沿 x 轴倾斜 ;参数 三:沿y 轴倾斜; 参数四:y 缩放
      参数五:x 位移;参数六:y 位移;()
      div#div2
      {
      	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(1,0,-0.5,0.8,0,0); /* Safari and Chrome */
      }
      
      matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
      translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
      translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
      translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
      scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
      scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
      scaleY(n) 定义 2D 缩放转换,改变元素的高度。
      rotate(angle) 定义 2D 旋转,在参数中规定角度。
      skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
      skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
      skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

2.3 3D转换

  • rotateX() 沿X轴旋转

    • div
      {
          transform: rotateY(130deg);
          -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
      }
      
  • rotateY() 沿Y轴旋转

    • div
      {
          transform: rotateY(130deg);
          -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
      }
      

2.4 过渡

多种属性,同时过渡 (宽、高、旋转)

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

在这里插入图片描述

2.4.1 与上图 效果相同 (只是将属性单独拿出来设置了)
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width,height,transform;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
	/* Safari */
	-webkit-transition-property:width,height,-webkit-transform;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	
	width: 200px;
    height: 200px;
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);

}
2.4.2 先竖向延长,然后等2秒 ,横向延长
div
{
	width:100px;
	height:100px;
	background:red;
	transition:height 1s, width 1s  linear 2s;
	/* Safari */
	-webkit-transition:height 1s , width 1s linear 2s;
}

div:hover
{
	width:200px;
	height:200px;
}

在这里插入图片描述

3、动画相关

3.1 颜色变化(简单例子)

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

在这里插入图片描述

3.2 关键帧控制

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

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

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

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

在这里插入图片描述

3.3 动画 单个属性

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; // 动画播放方向 (1/3/5正向,2/4/6逆向)
	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; // 动画播放方向 (1/3/5正向,2/4/6逆向)
	-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;}
}

在这里插入图片描述

4、新用户界面

4.1 多列

.newspaper
{
	-moz-column-count 2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:3; //列数

	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:100px; //列之间的间隔
}

在这里插入图片描述

4.2 列分割线

column-rule-style:solid;

在这里插入图片描述

4.3 可由 ‘用户调整大小’

	resize:horizontal; //不能调整 ,横向 ,纵向 ,横向加纵向  
	overflow:auto;

5、图片

5.1 图片圆角

<img src="paris.jpg" alt="Paris" width="400" height="300">
//相框效果 
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

5.2 调整图片中的文本位置

.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
	margin-top:-9px; // (调整 文字自身高度的 一半)
}
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}

在这里插入图片描述

5.3 卡片效果(用 阴影效果 实现)

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

在这里插入图片描述

5.4 图片滤镜

img {
    width: 33%;
    height: auto;
    float: left; 
    max-width: 235px;
}

.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);}
</style>
</head>
<body>

<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

在这里插入图片描述

5.5 图片点击方大 (图片模态框)

图片模态框

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片
首先,我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后,我们使用 JavaScript 来显示模态窗口,当我们点击图片时,图片会在弹出的窗口中显示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
首先,我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后,我们使用 JavaScript 来显示模态窗口,当我们点击图片时,图片会在弹出的窗口中显示:</p>
<img id="myImg" src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// 获取模态窗口
var modal = document.getElementById('myModal');

// 获取图片模态框,alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// 获取 <span> 元素,设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];

// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

</body>
</html>

在这里插入图片描述

6、按钮

6.1鼠标悬停 按钮效果

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

在这里插入图片描述

6.2 按钮阴影+ 按钮悬停阴影

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

在这里插入图片描述

6.3 正常按钮+禁用按钮(透明度)

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; //悬浮手指
}

.disabled {
    opacity: 0.6; //透明度
    cursor: not-allowed; //禁用标志
}

在这里插入图片描述

6.4 清除浮动

.button {

    float: left;
}
	
p{
 clear:both
}

在这里插入图片描述

6.5 悬浮时 添加动画 + 添加文字

.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: 1.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;
}

在这里插入图片描述

6.6 按钮点击 波纹效果

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

在这里插入图片描述

6.7 按压效果

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

在这里插入图片描述

7、分页

7.1 鼠标悬停分页样式

hover 悬停时 , 不执行 a.active 属性 执行 {background-color: #4CAF50;}

ul.pagination {
   display: inline-block;
   padding: 0;
   margin: 0;
}
ul.pagination li {display: inline;}

ul.pagination li a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
}

ul.pagination li a.active {
   background-color: #ddd;
   color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #4CAF50;}

在这里插入图片描述

8 框大小

8.1 box-sizing: border-box; (border和 padding 都计算在 width height 内)

属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

9 多媒体查询器

9.1 根据屏幕 width ,控制 样式

屏幕width 在 699px – 520px 之间 显示邮件图标

屏幕width 在 700px – 1001px 之间 显示 “ Email:”

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
</style>
</head>
<body>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

在这里插入图片描述

弹性盒子(Flex Box)

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

默认 一行 显示。

  • direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变:
  • flex-direction`的值有:
  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

justify-content 对齐属性 (内容按主线对齐)

justify-content: flex-start | flex-end | center | space-between | space-around

在这里插入图片描述

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

align-content 属性

align-content属性用于修改flex-wrap属性的行为。类似于align-items`, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。

order 作为排序值 越大排在越后面

代码

.first1 {
-webkit-order: 3;
}
.first2 {
-webkit-order: 2;
}
.first3 {
-webkit-order: -1;
}

flex item 1
flex item 2
flex item 3
示例图

在这里插入图片描述

margin: auto;

可以做一些,居中控制。

也可以在指定 方向上做 均匀调整。 margin-right: auto;

align-self

align-self` 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

flex-grow 分剩余空间占空间 比例

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

在这里插入图片描述

flex-basis 代替 width/height

比 width/height 优先级高

flex-shrink 压缩率

当子元素超过父元素超过 宽度/高度,又不能超出父元素是时 ,采用的压缩比。

弹性盒子 小结:
属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

| 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |

疑难样式 记录

(1) 文本单行显示 限制


  letter-spacing: 2px;  /*字间距*/
  display:block;/*内联对象需加*/
  width:5em;/*指定宽度*/
  word-break:keep-all;/* 不换行 */
  white-space:nowrap;/* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow:ellipsis;/* IE 专有属性,当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

(2) 多行文本显示 限制

  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

(3) 相对 父布局垂直居中

display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

以上是我在看【前端知识点】时的对【CSS3】样式的整理,以及开发中遇到的一些,难调的样式的总结(持续完善中。。。)

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读