![](https://img-blog.csdnimg.cn/20210115135830901.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Css
以实战为索,逐步深入Css各个环节,掌握Css项目所遇到的问题
阳光的男夹克
心软的人没遇到 小火慢炖的粥掺了水
展开
-
Css实现三角形
背景色三角形,只需改变 transparent(透明色) 就可改变方向,border-color 依次为上右下左<div class="border-down"></div>.border-down { width: 0; border-width: 20px; border-style: solid; border-color: black transparent transparent transparent; position: relative;}原创 2021-09-13 13:51:39 · 297 阅读 · 0 评论 -
Css 变量使用方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* :root 全局定义*/原创 2020-09-13 16:58:34 · 479 阅读 · 0 评论 -
Css 分别设置元素各个方向的圆角
border-top-left-radius: 5px; /* 左上角 */border-top-right-radius: 5px; /* 右上角 */border-bottom-left-radius: 5px; /* 左下角 */border-bottom-right-radius: 5px; /* 右下角 */原创 2021-03-01 17:05:08 · 599 阅读 · 0 评论 -
CSS基础
Js的全局作用域就是windowFunction 内存中保存一段代码的函数 代码重用 调用函数 函数名(实参值)第一种 以声明的方式创建函数 function 函数名(形参列表){ 函数体 return 返回值 } 有一个问题:会被声明提前第二种 以赋值的方式创建函数 var arr= function (形参列表){ 函数体 return 返回值 }第三种 用new创建函数 几乎不用 var fun=new Function函原创 2020-09-09 20:39:03 · 281 阅读 · 0 评论 -
Css 弹性布局
弹性布局display:flex 要发生弹性布局的子元素,他们的父元素,成为容器需设置display:flex,flex将块级元素设置为容器, inline-flex将行内元素设置为容器 元素设置为flex容器后,容器的text-align,vertical-align失效设置主轴的方向flex-direction 取值row 默认值,主轴是x轴,主轴起点在左端row-reverse 主轴是x轴,主轴起点在右端column 主轴是y轴,主轴起点在顶部column-reverse 主轴原创 2021-02-27 15:14:45 · 114 阅读 · 0 评论 -
元素滚动吸顶效果
position: sticky 粘性定位的元素是依赖于用户的滚动.它的行为就像 position:relative, 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。// 粘性定位的元素<view class="sticky"></view>// 添加 css 样式.sticky { position: sticky; top: 0; left: 0; right: 0; z-index: 500;}...原创 2021-02-27 15:13:15 · 127 阅读 · 0 评论 -
Css 实现渐变样条
效果如图所示基本布局 和演示<view class="address-line"></view><style> .address-line { margin-top: 100rpx; height: 8rpx; background-image: -webkit-linear-gradient(315deg,#82c9ff 8px,transparent 0,transparent 16px,#ff8282 0,#ff8282 32px,transpare原创 2021-01-17 20:22:37 · 118 阅读 · 0 评论 -
CSS文本溢出显示省略号
单行:(方法一)overflow:hidden;text-overflow:ellipsis;white-space:nowrap;单行:(方法二)overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;多行:overflow: hidden; text-overflow: ellipsis;display原创 2021-01-09 15:40:10 · 172 阅读 · 0 评论