css
Ace.三阶斗尊
web前端全栈工程师,熟悉vue2/vue3、react/react-native、node、uniapp、nuxt、electron、python.....
斗之气,斗者,斗师,大斗师,斗灵,斗王,斗皇,斗宗,斗尊,斗圣,斗帝
展开
-
2022web前端全栈完整整理——(二)css/css3篇
1. css基础:https://alex-ss.blog.csdn.net/article/details/830539012. css3新增属性值initial:可直接取消某个元素指定的样式值使其变为默认值,如color:initial。3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量,且支持双向响应:属性:v-bind(js/ts变量)。<template> <div class='ace_class'>文本颜色<原创 2022-05-06 21:57:15 · 588 阅读 · 0 评论 -
纯 CSS 实现绘制各种三角形(各种角度)
一、前言三角形实现原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。二、实现2.1 Triangle Up#triangl转载 2022-05-06 21:19:49 · 1431 阅读 · 0 评论 -
重置css样式库,内嵌normalize.css v8.0.1
ss.common.css npm仓库地址1. 下载引用: ```js npm install ss.common.css -D import 'ss.common.css/index.css' // 已自带引入:normalize.css: 8.0.1 ```2. 类名: ```css .block { display: block; } .inline-block { display: inline-block; } .i原创 2022-04-27 23:05:04 · 506 阅读 · 0 评论 -
css自定义滚动条
*{ margin: 0; padding: 0; box-sizing: border-box;}/* chrome & safari 浏览器 *//*滚动条整体部分,必须要设置*/::-webkit-scrollbar{ width: 6px; height: 6px; background-color: transparent;}/*滚动条的轨道*/::-webkit-scrollbar-track{ background-color: transparent;.原创 2021-02-26 20:54:56 · 135 阅读 · 0 评论 -
css中的flex:1存在的坑
<div class='wrap'> <div class='left'>左</div> <div class='right'>右</div></div><style> .wrap{ display:flex; } .left{ wid...原创 2020-04-15 18:47:03 · 3852 阅读 · 0 评论 -
css盒模型
一、盒模型: 1. 盒模型的主要属性:包括宽(width),高(height),内边距(padding),外边距(margin),边框(border)。 2. 两种盒模型:标准盒模型和怪异盒模型。 2.1 标准盒模型:除了低版本的IE,其他浏览器都兼容的盒模型。在标签盒模型中,盒子的宽(width)和高(height)就是盒子内容的宽高。而盒子实际的...原创 2020-01-25 20:57:12 · 247 阅读 · 0 评论 -
css实现单行/多行的超出文本的裁剪、省略号
添加小程序,兑换各种视频教程/数据资源。1.单行的文本超出省略号、裁剪:overflow:hidden;text-overflow:ellipsis; //取值clip为裁剪white-space:nowrap;2.多行文本超出省略号:display:-webkit-box;-webkit-box-orient:vertical;-webkit-line...原创 2018-11-27 14:45:40 · 2068 阅读 · 0 评论 -
weex下使用less,save等css预处理
添加小程序,兑换各种视频教程/数据资源。1. 创建weex项目:参考https://blog.csdn.net/qq_42231156/article/details/84837748。2. weex中使用less预处理器: 2.1 下载: npm install --save less npm install --save less-lo...原创 2019-01-22 21:20:14 · 1445 阅读 · 0 评论 -
css实现元素垂直水平居中
1. 参考:https://www.w3cplus.com/css/elements-horizontally-center-with-css.html。原创 2019-03-29 21:43:20 · 204 阅读 · 0 评论 -
css实现磨砂效果
1. css的滤镜实现:通过filter实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { ...原创 2019-09-23 14:10:54 · 5948 阅读 · 0 评论 -
CSS3知识点笔记————基础(五星)
添加小程序,兑换各种视频教程/数据资源。1.作用:美化和修饰HTML。又叫层叠样式表,样式表,级联样式表。2.优点: 2.1可以更好的将格式与结构分离。 2.2可以更好的控制页面的布局。 2.3可以制作体积更小,下载更快的网页。 2.4可以将多个网页同时更新,比以前更快更容易。3.使用CSS的三种方式: 3.1内联式:...原创 2018-10-15 09:12:05 · 669 阅读 · 0 评论 -
css页面布局和重置样式
<!--index.html--><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-sc...原创 2020-01-25 20:58:32 · 484 阅读 · 0 评论 -
css自定义滚动条
参考:https://www.cnblogs.com/ranyonsue/p/9487599.html。参考:https://blog.csdn.net/u013350495/article/details/83537655。转载 2019-11-14 17:11:19 · 212 阅读 · 0 评论