前端之CSS3
文章平均质量分 77
ass_ace
选择你所喜欢的,爱你所选择的
展开
-
css模块化
CSS 发展我们在书写 css 的时候其实经历了以下几个阶段:手写源生 CSS 使用预处理器 Sass/Less 使用后处理器 PostCSS 使用 css modules 使用 css in js手写源生 CSS在我们最初学习写页面的时候,大家都学过怎么去写 css,也就以下几种情况:行内样式,即直接在 html 中的 style 属性里编写 css 代码。 内嵌样式,即在 html h 中的 style 标签内编写 class,提供给当前页面使用。 导入样式,即在内联样式原创 2021-08-05 23:05:50 · 727 阅读 · 0 评论 -
鼠标悬停显示禁用图标
cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠//其中还有一个属性也是这个样式 cursor:no-drop;原创 2021-06-16 10:59:46 · 2108 阅读 · 0 评论 -
css3 渐变色与透明背景图片组合背景
background:url('../../static/img/bg_card.png') no-repeat, linear-gradient( 120deg, rgba(255, 106, 103, 1) 0%, rgba(225, 68, 65, 1) 100% );原创 2020-02-20 19:32:54 · 1803 阅读 · 0 评论 -
利用CSS写一个底部弧度效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>outline-offset</title><style type="text/css"> .container{ position: ...原创 2020-02-20 19:22:53 · 868 阅读 · 0 评论 -
利用outline和outline-offset属性画“+”号
outline:可以给一些标签加轮廓;outline-offset:是对轮廓的偏移位置进行设置;当把outline-offset设置为负值,并不断减小的时候发现,能画出一个加号; <div class="demo"></div> CSS样式设置如下: .demo{ width: 200px; he...原创 2019-08-11 11:39:16 · 547 阅读 · 0 评论 -
小程序——用CSS实现九宫格布局
如何使用CSS实现如下的九宫格布局:代码如下: <view class="form-first-bottom"> <view class="add-container" wx:for="{{upimgarr}}" wx:key="unique"> <image class="selectclass1" src='{{it...原创 2019-08-04 17:33:22 · 1144 阅读 · 0 评论 -
border边框绘制三角形
面试的时候也许你会遇到一个问题:问的是边框是什么形状的?,如果你的回答是矩形,那么你不是没做过边框绘制三角形,就是对于边框绘制三角形的原理并不是很清楚;其实边框的形状是梯形的首先,写一个小demo代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&...原创 2019-04-12 21:39:01 · 739 阅读 · 0 评论 -
CSS3学习笔记——颜色相关样式
利用alpha通道来设定颜色1.对RGB颜色设定alpha通道C3中可以通过alpha通道的方法来定义RGBA颜色;RGBA颜色:指的是红色值、绿色值、蓝色值、alpha通道值来定义的颜色通道范围为0-1.0,0表示完全透明,1表示不透明;background-color:rgba(255,0,0,0.5);2.对HSL颜色设定alpha通道HSLA颜色指的是利用色调(...原创 2018-08-23 23:15:56 · 311 阅读 · 0 评论 -
CSS3学习笔记——实现CSS3中的滤镜特效
概述 滤镜特效:指在页面被渲染之后再页面中某个局部呈现的一些特殊的视觉效果。滤镜起源于SVG,但在SVG与CSS3中使用不同的方式来定义盒使用滤镜。CSS3中使用一个图型来定义滤镜可以对页面上的任何可视元素使用滤镜特效;在Chrome、Opera、以及Safari浏览器中在filter样式属性前添加"-webkit"浏览器供应商前缀; 1.grayscale滤镜(灰度滤镜)...原创 2018-08-23 22:29:43 · 754 阅读 · 0 评论 -
CSS3学习笔记——选择器、text-shadow属性、word-wrap属性、rem
1.属性选择器 1)[att*=val]属性选择器 表示包含val 的所有att属性; 2)[att^=val]属性选择器 表示所有开头为val的att属性; 3)[att$=val]属性选择器 表示所有结尾为val的att属性;2.结构性伪类选择器 1)伪类选择器 类选择器可以以随便起名,但伪类选择...原创 2018-08-21 23:15:11 · 484 阅读 · 0 评论 -
CSS3学习笔记——多栏布局、盒布局、弹性盒布局
使用float或position属性进行页面布局的缺点两个块区域是各自独立的,如果在其中一个区域加入一些内容,将会使两个元素的底部不对齐,导致页面多出一块空白区域。如下例所示,第一个DIV中有图像元素,篇幅比较大:多栏布局 使用多栏布局可以将一个元素中的内容分为两栏或多栏显示,并且确保各栏中内容底部对齐; 多栏布局的相关属性: 1)column-count:将...原创 2018-08-23 20:25:13 · 4291 阅读 · 0 评论 -
CSS3学习笔记——动画
CSS3中的动画功能分为Transitions功能和Animations功能; 1.Transitions功能 支持从一个属性在指定时间内平滑过渡到另一个属性值;transitions功能具有的属性: 1)transition-property:哪种属性平滑过渡; 2)tranition-duration:在多久时间内完成属性的平滑过渡; ...原创 2018-08-23 12:36:03 · 195 阅读 · 0 评论 -
CSS3学习笔记——变形处理
2D变形 transform功能: 用来实现文字或图像的旋转、缩放、倾斜与移动的变形效果;可以单独实现效果,也可以对一个元素使用多个变形方法; 1)缩放 scale(缩放倍率):实现文字或图像的缩放处理; 只有一个参数时,该参数指的是水平和垂直方向缩放相同的倍数,如果是两个参数那么就是分别指水平、垂直各自的缩放倍数; ...原创 2018-08-22 23:50:16 · 203 阅读 · 0 评论 -
CSS3学习笔记——背景与边框相关样式
1.与背景相关的新增属性 1)指定背景的显示范围——background-clip属性 属性值:padding:表示显示范围不包括边框在内; border:表示背景的显示范围包括边框在内; 2)指定背景图像的绘制起点——background-origin属性 属性值:border:绘制起点为边框左...原创 2018-08-22 22:43:22 · 403 阅读 · 0 评论 -
CSS3学习笔记——display属性、overflow属性、text-overflow属性、box-shadow属性、box-sizing属性
1.display属性css中,使用display属性来定义盒的类型;属性值分别有:1) block;2) inline;3) inline-block:可以设置宽高,块元素可以并排显示;4) inline-table:如果将table元素中的diaplay属性设置为inline-table类型,就可以让表格与其他文字处在同一行; 但在各个浏览器中,对于文字与表格...原创 2018-08-22 14:00:45 · 1641 阅读 · 0 评论