
CSS3
文章平均质量分 73
zxuanxuanz
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
pointer-events
此时该元素将不响应指针事件,但它下面的元素可以响应指针事件,就像元素不存在于它们之上一样。② visibility属性值:visible,鼠标指针在元素边界上,且stroke属性值非none。① visibility属性值:visible,且鼠标指针在元素内部,且fill属性值非none。此时元素会响应指针事件,阻止这些事件在其下面的元素上触发。① visibility属性值:visible,且鼠标指针在元素内部或边界。① visibility属性值:visible,且鼠标指针在元素边界。原创 2023-07-28 15:20:01 · 411 阅读 · 0 评论 -
css滤镜:drop-shadow
因为box-shadow绘制的是矩形阴影,而drop-shadow可以给不规则图形绘制阴影。原创 2023-07-31 15:20:38 · 1454 阅读 · 0 评论 -
使用CSS3实现任意图片获取点,实现移入散开,移出聚集的动画特效以及悬浮动画
一、图片获取点,实现点击散开后聚集的动画特效(1)代码<template> <div class="logo-background"> <canvas id="canvas" v-if="loading" /> <div class="sideBox" ref="sideBox" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"> <po.原创 2021-02-07 16:28:21 · 977 阅读 · 0 评论 -
CSS3的盒类型和相关属性
1 盒的类型在CSS中,使用display属性来定义盒的类型。 block类型 inline类型 inline-block类型 (1)在CSS2.1中追加的一个盒类型。 (2)目前为止,它受到了Safari、 Chrome、Firefox、Opera、IE8以上版本浏览器的支持。(3)该类型盒属于block类型盒的一种,但是在显示时具有inline类型盒的...原创 2018-08-22 13:36:58 · 822 阅读 · 0 评论 -
CSS3文字与字体相关样式
1 text-shadow属性(1)功能 给页面上的文字添加阴影效果。(2)使用方法text-shadow:length length length color (阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色)注意:阴影离开文字的横方向距离、纵方向距离:必须指定,可指定负值。阴影的模糊半径:代表阴影向外模糊时的模糊范围。这个半径值越大,则阴影向外...原创 2018-08-21 20:28:43 · 286 阅读 · 0 评论 -
CSS3的其他重要样式和属性——颜色相关样式、用户界面相关样式
1 颜色相关样式CSS3中增加了3种颜色值——RGBA 颜色值、HSL颜色值、HSLA颜色值,并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。 对RGB颜色设定alpha通道 在CSS3中,可以通过对RGB颜色设定alpha通道的方法来定义RGBA颜色。(1)RGBA颜色是指利用红色值(R)、绿色值 (G)...原创 2018-08-26 21:06:04 · 298 阅读 · 0 评论 -
CSS3选择器
1 CSS中的伪元素选择器选择器:伪元素{属性:值;} first-line 用于向某个元素中的第一行文字使用样式。 first-letter 用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式。 before 用于在某个元素所有内容之前插入一些内容。 after 用于在某个元素所有内容之后插入...原创 2018-08-20 22:40:52 · 299 阅读 · 0 评论 -
CSS3中使用选择器在页面中插入内容
1 使用选择器来插入内容使用after或before选择器,在选择器的content属性中定义要插入的内容,当插入内容为文字的时候,必须要在插入文字的两旁加上单引号或者双引号。<style type="text/css">h2:before{ content:‘COLUMN’;}</style> 2 指定个别元素不进行插入 使用content属...原创 2018-08-20 23:48:30 · 749 阅读 · 0 评论 -
CSS3中布局相关样式——多栏布局、盒布局、弹性盒布局、calc方法
1 多栏布局使用多栏布局可以将一个元素中的内容分为两栏或多栏显示,并且确保各栏中内容的底部对齐。 column-count属性 在CSS3中,通过该属性来使用多栏布局方式,该属性的含义是将一个元素中的内容分为多栏进行显示。(1)浏览器书写Firefox:“-moz-column-count”Safari、Chorme、Opera:“-webkit-column-coun...原创 2018-08-23 21:46:02 · 674 阅读 · 0 评论 -
CSS3中的动画功能——Transitions 功能与Animations 功能
1 Transitions功能(1)浏览器支持:到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上、IE11以上浏览器支持该功能。 (2)功能在CSS3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。(3)使用方法transition:property durat...原创 2018-08-23 16:14:04 · 1073 阅读 · 0 评论 -
CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)
1 transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。(1)浏览器支持到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。 2 旋转使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。...原创 2018-08-23 14:52:28 · 29750 阅读 · 0 评论 -
CSS3中背景与边框相关样式
1 与背景相关的新增属性background-clip:指定背景的显示范围。background-origin:指定绘制背景图像时的起点。background-size:指定背景中图像的尺寸。background-break:指定内联元素的背景图像进行平铺时的循环方式。注意:Firefox浏览器:支持除了background-size属性之外的其他三个属性,需在属性前加上“...原创 2018-08-23 00:02:13 · 1128 阅读 · 0 评论