常用封装

1.边框

边框涉及1物理像素的问题，需要根据媒体查询进行相应的配置

.border-bottom{
            position: relative;
        }
        @media screen and (-webkit-device-pixel-ratio:1){
            .border-bottom::after{
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(1);
            }
        }
        @media screen and (-webkit-device-pixel-ratio:2){
            .border-bottom::after{
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(0.5);
            }
        }
        @media screen and (-webkit-device-pixel-ratio:3){
            .border-bottom::after{
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(0.33);
            }
        }

推荐这些技术文章：

基于vue3.0封装添加词组

<template>
<div class="box">
<p class="lable">正向词</p>
<div class="main border">
<div v-for="(item, index) in list.list" :key="index" v-if="list.list.l...

封装类似bootstrap的panel组件

<template>
<div>
<div class="panel" :class="[className,isbig?'isbig':'']">
<div class="panel-heading" @click="bodyHandle">
<div class="panel-title">...

uni-app UI效果封装

1.键值对单元

标题
键值对（文本）
键值对（输入框）
备注

.info-unit{
.title {
font-size: 16px;
font-weight: bold;
padding: 3px 0;
padding-left: 10px;
color: #007aff;
}
.te...

如何利用CSS画一个大风车

废话少说直接上效果图：

主要是通过设置边框的样式去画的
1.第一步
建一个容器便于每个风叶定位
<!-- 容器 方便定位每一个风叶 -->
<div class="box">
<div class="red"></div>
</div>

然后就是对应的CSS代码
.box{
w...

移动端1px物理边框的css

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft ...

从 html 元素继承 box-sizing

box-sizing属性不具有继承性

 
 
可以这样设置：

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}

就不需要每次写padding和border时都...

CSS之box-sizing: border-box盒子内边距不增大

box-sizing: border-box盒子内边距不增大

*{
/*不增大*/
box-sizing: border-box;
}

 设置后父元素就不会跟着增大了

...

css移动端适配 1px边框的解决方案

.border{
width: 100px;
height: 100px;
position: relative;
}
//加上媒体查询更严谨一些 dpr为2的设配才进行缩放，dpr为1的设备边框就是1px
@media screen and (-webkit-min-device-pixel-ratio:2) {
.border::after{
content: ...

CSS实现各种形状与画图工具Graphics2D画形状的关系

CSS实现各种形状

CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。
 圆形
 
要使用CSS来制作一个圆形，我们需要一个div...

解决移动端上1px的问题

一、伪类 + transform
基于 media查询判断不同的设备像素比对线条进行缩放：

.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
t...