星空万里_个人页

使用 background-cli、 text-fill-color：

.gradient-text-one{

background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
-webkit-background-clip:text; 
-webkit-text-fill-color:transparent; 

}

说明 ：

background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。

webkit-text-fill-color: transparent 使用透明颜色填充文本。

webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

比如：

.container {
animation: myfirst 5s;
-moz-animation: myfirst 5s; / Firefox /
-webkit-animation: myfirst 5s; / Safari 和 Chrome /
-o-animation: myfirst 5s; / Opera /
}

文字显示阴影效果共4个值，第一个代表距离左多少距离开始显示阴影效果，第二个值代表距离上多少距离开始显示阴影效果，第三个值代表阴影范围大小，第四个值为阴影效果颜色。
http://www.divcss5.com/edu/data/attachment/forum/201405/04/214934sw99b5fm2iglfjje.png

通过文本编辑器或者代码编辑都可以打开，建议使用代码编辑器打开，会有高亮提示，可读性比较友好。

通过margin-top属性设置，比如：.container {
margin-top: 10px;
}

text-align的center可用于特殊行内标签或者文字的水平居中。

.container {

text-align: center;

}

background-position的center可以调整背景图片在容器中剧中。

.container {
background: url(xxx) no-repeat left center;
}

css图片水平居中
1.利用margin: 0 auto实现图片水平居中
利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：

比如：

2.利用文本的水平居中属性text-align: center

比如：

css图片垂直居中

1.利用高==行高实现图片垂直居中
这种方法是要注明高度才可以使用，代码如下：

2.利用绝对定位实现图片垂直居中
如果已知图片的宽度和高度可以这样，代码如下：

<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />

通过在图片的容器上设置position: relative; 在需要叠加内容容器上设置position: absolute; 并把内容容器放置在图片容器中，并调整内容容器的top和left属性即可。

找到登录框容器对应的class或id，通过设置他们的width和height实现。
比如：.container {

width: 100px;
height: 200px;

}

用心写，注意权重，注意规范，平时写代码时要保持一个固定的习惯，比如每个属性在什么位置。这样的css可读性会更好。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
比如：
如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {

body {
    background-color: lightblue;
}

}

通过css3的特性可以实现：
.t0{

    border-bottom: 80px solid #fb3;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    height: 0;
    width: 80px;
    margin: 0 0 10px 0;
  }

  .t1{
    border-radius: .3em .3em 0 0;
    margin: 10px;
    height: 30px;
    width: 80px;
    background: #fb5;
    transform-origin: bottom;
    transform: scaleY(1.1) perspective(.3em) rotateX(3deg);
  }

通过设置容器的边框大小和透明度既可实现：

.demo {

content: "";
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #b0b5d6;

}

找到img标签，设置外间距即可。比如：img { margin-right: 10px; }

calc()是css3新添加属性，它可以让你使用一个算术表达式来表达长度值，这意味着可以用它来定义div的宽度，并设置margin、padding、border等。
比如：width: calc(100% - 20px); //注：减号前后要有空格，否则很可能不生效！！

css是层叠样式表，用来定义一个网页的文字的样式，例如字体，大小，颜色，等信息，删了之后估计某个程序的某个界面排版就全乱了，慎重。

transform是变形的意思，可以设置很多的特性。比如：transform: rotate(180deg); transform: scale(1.2);

通过设置line-height，比如line-height: 20px;

通用的代码编辑器就可以，比如：webstorm、vscode等。

通过设置font-family完成，比如：font-family: 'LanTing ZhongHei', 'Microsoft YaHei', SimHei, 'WenQuanYi Micro Hei', STHeiti, sans-serif;

通过设置font-family完成。比如：font-family: 'LanTing ZhongHei', 'Microsoft YaHei', SimHei, 'WenQuanYi Micro Hei', STHeiti, sans-serif;

1. 利用设置较小宽度，让一排显示不完两个文字，使其文字自动换行。
2. 通过css3的旋转特性，使文字竖排。