CSS

最新推荐文章于 2024-01-15 00:00:00 发布

你大爷的！

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/earl95/article/details/84822691

版权

writing-mode 实现文字竖排版

通过text-align-last:justify设置文本两端对齐

3.overflow-scrolling 支持弹性滚动
body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

4：<div class="bruce flex-ct-y">
	<a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
	<a class="tooltips" href="https://www.baidu.com"></a>
</div>

.tooltips {
	position: relative;
	margin-top: 10px;
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: $purple;
	line-height: 40px;
	color: #fff;
	&::after {
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 5px;
		width: 100%;
		height: 100%;
		background-color: rgba(#000, .5);
		opacity: 0;
		text-align: center;
		font-size: 12px;
		content: attr(data-msg);
		transition: all 300ms;
	}
	&:first-child {
		margin-top: 0;
	}
	&:hover::after {
		left: calc(100% + 20px);
		opacity: 1;
	}
	&[href]:empty::before {
		content: attr(href);
	}
	&[href]:empty:hover::after {
		display: none;
	}
}

5：使用:valid和:invalid校验表单
<div class="bruce flex-ct-x">
	<form class="form-validation">
		<div>
			<label>名字</label>
			<input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
		</div>
		<div>
			<label>手机</label>
			<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
		</div>
		<div>
			<label>简介</label>
			<textarea required></textarea>
		</div>
	</form>
</div>

.form-validation {
	width: 500px;
	div {
		margin-top: 10px;
		&:first-child {
			margin-top: 0;
		}
	}
	label {
		display: block;
		padding-bottom: 5px;
		font-weight: bold;
		font-size: 16px;
	}
	input,
	textarea {
		display: block;
		padding: 0 20px;
		outline: none;
		border: 1px solid #ccc;
		width: 100%;
		height: 40px;
		caret-color: $blue;
		transition: all 300ms;
		&:valid {
			border-color: $green;
			box-shadow: inset 5px 0 0 $green;
		}
		&:invalid {
			border-color: $red;
			box-shadow: inset 5px 0 0 $red;
		}
	}
	textarea {
		height: 122px;
		resize: none;
		line-height: 30px;
		font-size: 16px;
	}
}
6.使用pointer-events禁用事件触发

要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled
场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

7.美化单选、复选框
<div class="bruce flex-ct-x">
	<ul class="beauty-selection">
		<li>
			<input type="radio" name="radioName" id="fed-engineer" hidden>
			<label for="fed-engineer"></label>
			<span>前端工程师</span>
		</li>
		<li>
			<input type="radio" name="radioName" id="bed-engineer" hidden>
			<label for="bed-engineer"></label>
			<span>后端工程师</span>
		</li>
		<li>
			<input type="radio" name="radioName" id="fsd-engineer" hidden>
			<label for="fsd-engineer"></label>
			<span>全栈工程师</span>
		</li>
	</ul>
</div>

.beauty-selection {
	display: flex;
	li {
		display: flex;
		align-items: center;
		margin-left: 20px;
		&:first-child {
			margin-left: 0;
		}
	}
	input:checked + label {
		background-color: $orange;
	}
	label {
		margin-right: 5px;
		padding: 2px;
		border: 1px solid $orange;
		border-radius: 100%;
		width: 18px;
		height: 18px;
		background-clip: content-box;
		cursor: pointer;
		transition: all 300ms;
		&:hover {
			border-color: $blue;
			background-color: $blue;
			box-shadow: 0 0 7px $blue;
		}
	}
	span {
		font-size: 16px;
	}
}

关于背景图片：https://www.cnblogs.com/polk6/p/6066642.html

灵活运用CSS开发技巧(66个实用技巧，值得收藏)

https://juejin.im/post/5d4d0ec651882549594e7293

手机video 都可以在页面中播放，而不是全屏播放了

使用clearfix 清除浮动，解决父类高度崩塌。

.clearfix {
zoom: 1;
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

伪元素&.swiper-slide:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(2px);
z-index: 2;
display: none;
}

user-select 禁止用户选中文本

div {
user-select: none; /* Standard syntax */
}

移除浏览器默认的样式，比如chrome的input默认样式，然后就可以定义需要的样式。

input, button, textarea, select {
*font-size: 100%;
-webkit-appearance:none;
}

使用CSS transforms 或者 animations时可能会有页面闪烁的bug -webkit-backface-visibility: hidden;

transform-style: preserve-3d 让元素支持3d

div {
transform: rotateY(60deg);
transform-style: preserve-3d;
}

perspective 透视这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
perspective: 400px;
}

css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word;
word-break: normal;

//强制换行
word-break:break-all;

calc() function, 计算属性值

div {
width: calc(100% - 100px);
}

css3 linear-gradient 线性渐变默认开始在top, 也可以自定义方向。

div {
linear-gradient(red, yellow)
}

background: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 filter Property 图片过滤

img {
filter: grayscale(100%); //灰度
filter: blur(5px); //模糊
filter:brightness(200%); //高亮
filter:saturate(8); //饱和
filter:sepia(100%); //怀旧
...

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;
}

div {
width: 100px;
position: absolute;
right: 0;
}

// 使用margin-left: auto 自动算出做左边宽度，实现内容贴右边
div {
width: 100px;
margin-left: auto;
}

bootStrap 一行显示5个

@media (min-width: 1200px) {

.col-zdlg-2-5{

float: left;

width:20%;

}

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
position: relative;
min-height: 0px;
padding-left: 0px;
padding-right: 0px;
}
@media ( min-width : 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media ( min-width : 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media ( min-width : 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

右箭头
.right-arrow {
display :inline-block;
position: relative;
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
}

.right-arrow::after {
display: inline-block;
content: " ";
height: 18rpx;
width: 18rpx;
border-width: 4rpx 4rpx 0 0;
border-color: #c7c7cc;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
right: 6rpx;
margin-top: -9rpx;
}

上下箭头
// 下箭头
.down-arrow {
display :inline-block;
position: relative;
width: 40rpx;
height: 30rpx;
margin-right: 20rpx;
}

.down-arrow::after {
display: inline-block;
content: " ";
height: 18rpx;
width: 18rpx;
border-width: 0 2rpx 2rpx 0;
border-color: #999999;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform-origin: center;
transition: transform .3s;
position: absolute;
top: 50%;
right: 10rpx;
margin-top: -10rpx;
}
// 加上active旋转成上箭头
.down-arrow.active::after {
transform-origin: center;
transform: rotate(-135deg);
transition: transform .3s;
}

你大爷的！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

writing-mode 实现文字竖排版通过text-align-last:justify设置文本两端对齐3.overflow-scrolling 支持弹性滚动body { -webkit-overflow-scrolling: touch;}.elem { overflow: auto;}4：<div class="bruce flex-ct-y"&g...
复制链接

扫一扫