CSS - 教程之家

147浏览

0评论

CSS3二级导航菜单制作步骤详解

如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动...

2020-11-14

470浏览

0评论

css怎么实现字体描边效果

text-stroke是text-stroke-width和text-stroke-color（给文本填充颜色）两个属性的简写。text-stroke属性常常配合text-fill-color（text-fill-color属性是给文本填充颜色）一起使用...

2020-11-13

419浏览

0评论

CSS如何清除浮动？Clear和BFC方法介绍

在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题<!doctype html><html><head> <meta ch...

2020-11-13

448浏览

0评论

css怎么在图片上加阴影

属性介绍：box-shadow属性可以设置一个或多个下拉阴影的框。语法：box-shadow: h-shadow v-shadow blur spread color inset;属性值： h-shadow 必需的。水平阴影的位置。允许负...

2020-11-13

416浏览

0评论

css怎么给图片加上下边框

border-bottom 简写属性把下边框的所有属性设置到一个声明中。 border-bottom-width 规定下边框的宽度。 border-bottom-style 规定下边框的样式。 border-bottom-color...

2020-11-13

329浏览

0评论

css中如何给整个页面添加背景颜色

background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。属性值： color 指定背景颜色。 transparent 指定背景颜色应该是透明...

2020-11-13

408浏览

0评论

css3倒影效果怎么实现

box-reflect属性设置或检索对象倒影。box-reflect属性包括3个值。1、direction 定义方向，取值包括 above 、 below 、 left 、 right。above：指定倒影在对象的上边below：指定倒...

2020-11-13

86浏览

0评论

css目标伪类是什么

在css中，目标伪类选择器是“:target”，是众多CSS3众多动态伪类选择器中的一个，用来匹配锚点指向的元素，突出显示活动的HTML锚。语法：E:target{css样式}表示选择匹配...

2020-11-13

437浏览

0评论

css中width有啥属性？

css中width相关的属性 width属性：设置元素的宽度 min-width属性：设置元素的最小宽度。 max-width属性：设置元素的最大宽度。 border-width属性：设置四条边框的宽度。 borde...

2020-11-13

447浏览

0评论

css如何让图片和文字垂直居中对齐

可以使用flex布局实现居中（更简单，不支持IE9）。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ dis...

2020-11-13

95浏览

0评论

css怎么让图片旋转90度

属性介绍：Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。语法：transform: none|transform-functions;属性值： none 定义不进行转换。 tran...

2020-11-13

517浏览

0评论

css3中2d变形有几种？

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。变...

2020-11-13

473浏览

0评论

css和div的区别是什么

div是html标签<div>标签可定义文档中的分区或节（division/section），用于定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，以便通过 CSS 来对这些...

2020-11-13

523浏览

0评论

css中grid布局和表格有什么区别

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。CS...

2020-11-13

387浏览

0评论

css如何实现文字不能选中

属性介绍：user-select是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。属性值：auto——默认值，用户可以选中元素中的内容none——用户不能选择元...

2020-11-13

369浏览

0评论

css怎么给一个盒子加盒阴影

box-shadow属性可以设置一个或多个下拉阴影的框。语法：box-shadow: h-shadow v-shadow blur spread color inset;提示：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性...

2020-11-13

99浏览

0评论

常见的css块级元素有哪些

css块级元素介绍：根据W3C上的解释，就是说block（块级）元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）。其实，通俗点来说，就是块元素(block element)一...

2020-11-12

518浏览

0评论

css如何隐藏溢出来的文字

属性介绍：text-overflow 属性规定当文本溢出包含元素时发生的事情。语法：text-overflow: clip|ellipsis|string;属性值：让溢出的文字隐藏text-overflow:ellipaos;/*让最后一个...

2020-11-12

94浏览

0评论

怎么用CSS调整背景图的大小

属性介绍：background-size 属性规定背景图像的尺寸。语法：background-size: length|percentage|cover|contain;属性值介绍：举例：div{background:url(img_flwr.gif);background-s...

2020-11-12

449浏览

0评论

css中的流式布局是什么意思

什么是流式布局网页布局中包括:静态布局，流式布局，响应式布局和弹性布局几种情况。静态布局：指的就是网页中的所有元素都使用px为单位。不管浏览器具体的大小是多少，始终按照设...

2020-11-12

99浏览

0评论

css如何设置鼠标的形状

cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。默认值：auto继承性：yes...

2020-11-12

108浏览

0评论

CSS元素选择器的运作原理介绍

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏...

2020-11-11

554浏览

0评论

css中的四种基本选择器类型分别是什么

CSS的选择器分为两大类：基本选择器和扩展选择器，其中有4种基本选择器。基本选择器：1、标签选择器：针对一类标签2、ID选择器：针对某一个特定的标签使用3、类选择器：针对你想要的所...

2020-11-11

116浏览

0评论

CSS怎么控制行高？

css line-height 属性line-height 属性设置行间的距离（行高）。注释：不允许使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不...

2020-11-11

105浏览

0评论

css中更改透明度的属性是什么

Opacity属性设置一个元素的透明度级别。语法：opacity: value|inherit;属性值：value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）inherit Opacity属性的值应该从父元素继承举...

2020-11-11

488浏览

0评论

css中vm是什么单位

vw：视口的最大宽度，1vw=视口宽度的百分之一；vh：视口得最大高度，1vh=视口高度的百分之一；vmin/vm：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。...

2020-11-11

205浏览

0评论

css中无继承性的属性有哪些

无继承性的属性：1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白...

2020-11-11

265浏览

0评论

css3中过渡和动画的区别是什么

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情...

2020-11-11

91浏览

0评论

css如何定义字体颜色

属性介绍：Color属性指定文本的颜色。提示：合理的背景颜色和文本颜色搭配，可以提高文本的可读性。举例：body { color:red;}h1 { color:#00ff00;}p { color:rgb(0,0,255)...

2020-11-11

70浏览

0评论

css网页布局小技巧

前端网页布局小技巧：1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标...

2020-11-11

454浏览

0评论

了解css中容易被忽略特性，避免一些经常遇到的坑

CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑。大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小...

2020-11-11

85浏览

0评论

CSS 说明横向进度条最后显示文字的实现代码

问题描述

在工作中想要实现如下效果：

解决思路

在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧

<div class="content"> <div cla...

2020-11-10

160浏览

0评论

css盒模型有哪些属性

CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。示例代码：<!DOCTYPE html><html><head> <meta charset="UTF-8">...

2020-11-10

421浏览

0评论

响应式css前端框架有哪些

常用的响应式css前端框架（部分）：1、Semantic UI FrameworkSemantic通过创造一个用来方便分享UI的语言使得开发人员和设计师的可控范围更为广泛。不再使用象形文字：Semantic使用...

2020-11-10

446浏览

0评论

你可能还不知道的7个惊人的css属性！

学习CSS是构建好看网页的一种方式。但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的...

2020-11-10

122浏览

0评论

css实现倒计时效果

一、实现效果截图二、实现原理看到上图效果应该很容易猜到原理，纯CSS的话使用轮播。通过改变图片的margin-top，再加上亿点点动画，亿点点数字图片，就实现了。使用PS建数字图片：然...

2020-11-10

104浏览

0评论

css如何制作饼状图

前言：在工作中，有时我们会有饼状图的需求，如统计图表、进度指示器、定时器等，当然，实现方式也有很多，甚至有现成的js库可以拿来直接使用。兴趣使然，自己动手利用纯css实现饼状图，看...

2020-11-07

112浏览

0评论

vertical-align负值和margin-bottom负值的差异有哪些？

vertical-align负值和margin-bottom负值的差异有哪些？下面本篇文章给大家介绍一下vertical-align负值和margin-bottom负值的区别。有一定的参考价值，有需要的朋友可以参考一下...

2020-11-07

59浏览

0评论

css line-height值为150%或1.5值的区别

这是一个小小的不经意的问题，但是却常常被一些面试官提起。一般都会一下子进入懵逼状态，那让我们来看看区别在哪里？我先新建一个html,代码如下：<p style="line-height:150%;font...

2020-11-04

85浏览

0评论

深入浅析css中的z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。层级关系的比较1. 对于同级元素，默认(或position:static)情况下文档流后面的...

2020-11-04

380浏览

0评论

你知道怎么利用css实现内凹圆角么

本文利用径向渐变来实现背景透明的内凹圆角。基本线性渐变div { height: 100px; width: 200px; background-image: linear-gradient(90deg, red, blue);}<div>从左...

2020-11-04

91浏览

0评论

你知道怎么使用纯css来实现下拉菜单效果么

具体实现步骤如下：1、用ul 和 li标签写一个关联结构（ul 和 li的父子关系浑然天成，一般的关联结构都用它们）<ul class="nav"> <a href="#">服装</a> <ul class="plat">...

2020-11-04

84浏览

0评论

使用HTML+CSS制作一些动画提示工具

当你的用户需要一些额外的上下文来放置图标，或者当他们需要一些保证来点击按钮，或者可能是一个复活节彩蛋的标题来搭配一个图片时，工具提示是一个很好的方法来增强用户界面。现...

2020-11-03

109浏览

0评论

如何用css3实现switch组件开关的方法

本文介绍了用css3实现switch组件的方法，分享给大家，具体如下：基于表单的checkbox效果图原理checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先...

2020-11-01

109浏览

0评论

纯css3使用vw和vh实现自适应的方法

响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美...

2020-11-01

78浏览

0评论

使用css与js生成的唯美炫酷的图形树效果

效果图如下所示：在线演示：Here～给大家分享一个使用css与js生成的唯美炫酷的图形树效果，相关代码如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>...

2020-11-01

97浏览

0评论

css实现右侧固定宽度左侧宽度自适应

反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区...

2020-11-01

70浏览

0评论

CSS水平垂直居中解决方案(6种)

准备
创建元素<div class="parent"> <div class="child">child</div></div>垂直水平居中方案一：知道宽度的情况下 absolute+margin负值.parent { width:400px; height:400...

2020-11-01

67浏览

0评论

css3 仿写阿里云水纹效果的示例代码

本文介绍了css3 仿写阿里云水纹效果的示例代码，分享给大家，具体如下：效果图什么也不说了，上代码。<!DOCTYPE html><html><head> <title>css3 水纹效果</title> <style typ...

2020-11-01

74浏览

0评论

ES6与canvas实现鼠标小球跟随效果

最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。首先，html部分，目前就一个canvas标签。 <canvas id="canv...

2020-11-01

热门文章