CSS常用属性

weixin_46438810

已于 2022-08-24 18:13:24 修改

阅读量536

点赞数

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

于 2022-08-22 21:39:56 首次发布

本文链接：https://blog.csdn.net/weixin_46438810/article/details/125912442

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

边框

border-radius: 22px 定义边框的弧度
border:1px solid red 定义边框样式颜色和宽度
border-bottom:1px solid #f0f0f0;定义下面款的颜色样式和宽度
outline:none 轮廓不可见
box-shadow:0 0 8px rgba(0, 0, 0, .2)给边框设置阴影
x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色

背景

background：url()设置背景图片//background:url(${QR});
background-size：contain设置图片包含
background: linear-gradient(45deg, blue, red) //渐变轴为45度，从蓝色渐变到红色

模型

box-sizing:border-box盒模型

字体设置

居中

line-height:56px设置行高，字体垂直居中
text-align: center文字水平居中

大小

粗细

font-weight:1000;字体加粗

布局

float：left左浮动
position：relative绝对定位absolute相对定位fixed固定定位sticky粘滞定位

动画

icon font旋转

transition:all .2s ease-in;由快到慢，执行200毫秒的动画
transition-origin:center center;动画的中心
transform:rotate(0deg);指定了 rotate() 的旋转程度
display:block;设置为块元素

超链接

text-decoration:none;删除超链接的下划线

生成三角形

生成实心三角形

.triangle{
    position:absolute;
    top:-25px;
    content:'';
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid white;
    border-left: 15px solid transparent;
}

生成有边框的三角形



	<!--向下的三角形-->
	<div class="border-down">
		<span></span>
	</div>

.border-down{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #333;
    position: relative;
    span{
        display: block;
        width: 0;
        height: 0;
        border-left: 28px solid transparent;
        border-right: 28px solid transparent;
        border-top: 28px solid #F0981C;
        position: absolute;
        left: -28px;
        //用第二个三角形覆盖第一个三角形，留下三角形的三边
        top: -29px;
    }
}

在这里插入图片描述

生成空心三角形

width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #333;
position: relative;
margin: 50px auto;
span{
    display: block;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 28px solid white;
    position: absolute;
    left: -28px;
    //用第二个三角形覆盖第一个三角形的上边框
    top: -30px;
}

在这里插入图片描述

修改层级

z-index:999;(数字越大层级越高）

其他

小手

cursor:pointer;将鼠标变成小手

块元素

display:block 设置为块级元素

滚动条

overflow-y: scroll;

隐藏滚动条：

// Chrome和Safari浏览器
  ::-webkit-scrollbar {
    display: none; 
  }
 //IE浏览器
 -ms-overflow-style: none; /* IE 10+ */
//firefox
scrollbar-width: none; /* Firefox */

iconfont引入

1. import { Icon } from '../../static/iconfont'
2. 在组件中引入组件icon  <Icon/>
3. 使用 <i className='iconfont'>&#xe678;</i>