CSS - 教程之家

193浏览

0评论

css3实现背景动态渐变效果

对于css3的学习，更多的是在于对新特性和基础理论的熟悉，这篇文章通过一个案例带领大家了解css3里一些理论知识，也将一些技巧加以总结，从而提高大家的开发效率；本次案例为（背景颜色...

2020-10-16

299浏览

0评论

CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked

我们实现被点击的按钮为红色图片样式，即其它没选中的按钮为灰色图片样式，看下面图片样式：1、首先我这里创建两个radio：（也可以多声明几个，这里的数据正常是动态获取的）<input type=...

2020-10-16

176浏览

0评论

使用css画一个文件上传图案

如下图，如果是你，你会怎么实现：通常我们会通过字体图标来显示中间的加号，外层用一个div包裹即可；或者使用伪元素来模拟中间的一横一竖，这都比较麻烦。其实我们可以直接使用div+css...

2020-10-16

130浏览

0评论

CSS样式解决文字过长显示省略号问题

一、CSS样式解决文字过长显示省略号问题1、一般样式　　一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个...

2020-10-16

160浏览

0评论

详解flex布局中flex-grow与flex-shrink的计算方式

CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局，其中决定 Flex 布局内项目宽度/高度的是三个属性：
flex-basis, flex-grow, flex-shrink.flex-basis　　flex-basis 决定...

2020-10-16

190浏览

0评论

CSS巧妙实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了，比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现，很显然是用一块白色背景...

2020-10-16

110浏览

0评论

img标签之间的间距问题原理详解

img标签基础解析在HTML5中img标签图片四要素：（1）src：图片路径
（2）width：
（3）height：
（4）alt：alert的作用:当图片发生错误时候，用alt里面的函数表示错误内容便于搜索引擎抓取(方便于搜索引...

2020-10-16

527浏览

0评论

CSS3实现缺角矩形，折角矩形以及缺角边框

前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂...

2020-10-16

101浏览

0评论

纯CSS 实现酷炫的充电动画

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。画个电池当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：欧了，勉强就是它了。有了电池，那接下来直接充电吧...

2020-10-16

124浏览

0评论

浅析css中使用border属性与display属性的方法

border属性介绍 border属性设置元素边框。边框3个要素如：粗细、线型、颜色。边框线型属性值说明表如：属性指描述...

2020-10-16

120浏览

0评论

css 透明边框background-clip妙用

本篇文章主要介绍了css 透明边框background-clip妙用，分享给大家，也给自己留个笔记<div class="border"></div>.border { width: 300px; height: 300px; background:...

2020-10-16

137浏览

0评论

详解CSS3新增的背景属性

先前，再css里面我们知道background的几个属性color，image，repeat，attachment，position，这些都是我们再css里面常用的，那么css3新增的属性有哪些呢？往下看：**CSS3新增属性：background-c...

2020-10-16

99浏览

0评论

css3 flex布局 justify-content:space-between 最后一行左对齐

在使用justify-content:space-between布局时，针对最后一行元素使用 justify-self: start;没有效果，查了下css3 flexbox 还未支持。那么如何实现最后一行左对齐呢？现有的几个方...

2020-10-16

134浏览

0评论

使用纯CSS实现3D旋转效果的示例代码

主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果效果HTML代码<body> <div class="box"> <div class="face front"> <h2>前面</h2>...

2020-10-16

107浏览

0评论

详解如何使用CSS3中的结构伪类选择器和伪元素选择器

结构伪类选择器介绍结构伪类选择器是用来处理一些特殊的效果。结构伪类选择器属性说明表属性描述...

2020-10-16

83浏览

0评论

使用Rem布局实现自适应

之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。为什么要自适应？比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的...

2020-10-16

280浏览

0评论

CSS动画实现背景无缝无限循环的实现示例

1. 需求一张图片从左向右无限循环移动2. 代码由于是应用在移动端，故使用rem单位，后面问题也发生在这。HTML<div class="dog"></div>CSS.dog { width: 5.4rem;...

2020-10-16

144浏览

0评论

css实现可控虚线的方法

前言css生成虚线，前端小儿科。一般都会用border来实现，不做深入考究，但是生成如下虚线？如何操作？实现方式实现方式，有的人用多个span生成，一个小圆点就是一个span，这样是可以，但是整...

2020-10-16

113浏览

0评论

css 元素显示隐藏的9种思路

在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路display对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题...

2020-10-16

114浏览

0评论

flex布局兼容性问题小结

一.W3C各个版本的flex2009 version
标志：display: box; or a property that is box-{*} (eg. box-pack)2011 version
标志：display: flexbox; or the flex() function or flex...

2020-10-16

74浏览

0评论

解决Img图片底部空白缝隙问题

最近做项目发现引用图片时下方总出现空白，情况如下图所示。<style> .img-box { border: 2px solid red; width: 550px; }</style><div class="img-box">...

2020-10-16

102浏览

0评论

CSS3 旋转立方体问题详解

3D坐标概念当元素进行旋转时，他的坐标轴也跟着他进行旋转注意-y方向问题旋转立方体的效果分析一个容器包含6个div position：absolute 之后6个面完全重合...

2020-10-16

65浏览

0评论

CSS实现粒子动态按钮效果

原文链接https://github.com/XboxYan/no...按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？通常这类效果第...

2020-10-16

97浏览

0评论

Grid 宫格常用布局的实现

两边无缝隙，每列之间有缝隙width: 100%; display: grid; grid-template-columns: repeat(4,1fr); justify-items: stretch; grid-gap: 1px;属性介绍：justify-items属性设...

2020-10-16

129浏览

0评论

css实现悬浮客服效果

<div class="sideBar"> <div> <div class="tips">在线客服</div> <ul class="list"> <li>QQ:1846492969</li> <li>QQ:1846492969</...

2020-10-16

90浏览

0评论

通过CSS边框实现三角形和箭头的实例代码

一、CSS盒子模型盒子包括：margin、border、padding、content
边框交界处呈现平滑的斜线，利用此特点，通过设置各边框宽度和颜色可以得到小三角等。
div元素是块级元素，显示为块框...

2020-10-16

79浏览

0评论

css3一个简易的 LED 数字时钟实现方法

这个应该是已经有很多人做过的东西，我应该只是算手痒，想写一下，所以，花了点时间折腾了这个，顺便把 Dark Mode 的处理也加上了。首先可以很明确的一点，这个真没技术含量存在，只是需...

2020-10-16

128浏览

0评论

2分钟教你实现环形/扇形菜单(基础版)

前言
项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。这个组件是基于react,但是原理都一样。展开效果如下：
实现
css(less)@c...

2020-10-16

97浏览

0评论

CSS教程:css属性之媒体（Media）类型

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。声...

2020-10-16

101浏览

0评论

移动端自适应样式之@media的使用方法

通用手机端样式：@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}指定手机端高度样式：@media screen and (max...

2020-10-16

77浏览

0评论

CSS中使用文本阴影与元素阴影效果

文本阴影介绍在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 text-shadow属性值说明，在文本阴影...

2020-10-16

65浏览

0评论

CSS3实现网站商品展示效果图

本文介绍了CSS3实现网站商品展示效果图，分享给大家，具体如下：html代码<div class="product"> <ul> <li> <div class="pro-img"> <a href="#"> <img src="images...

2020-10-16

97浏览

0评论

深入理解CSS中的数学表达式calc()

数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。本文将介绍calc()的相关内容定义数学表达式calc()是calculate计算的缩写...

2020-10-16

152浏览

0评论

css复杂选择器及css字体样式、颜色属性详解

之前学习了css的一些基础选择器，然而今天要介绍css的复杂选择器，复杂选择器一共有三种1.父子（派生）选择器<div class="wrapper"> <strong class="box"> <em>2...

2020-10-16

128浏览

0评论

CSS实现放大缩小关闭按钮(实例代码)

这种效果最常见是在我们的浏览器页面上，先给大家展示效果图：如上图所示，使用CSS 绘制上述三个按钮：<template> <div class="windowAction"> <button class="min">缩小</butt...

2020-10-16

168浏览

0评论

如何用border-image实现文字气泡边框的示例代码

开发活动中，遇到了一个很简单的文字气泡效果，大概就是这样的。emmmm，看起来很简单。实现思路如下主体是个div，加上渐变和边框还有圆角即可。左侧元宝切图，用::before定位...

2020-10-16

139浏览

0评论

CSS3动画特效在活动页中的应用

背景在不知不觉中，忙碌的一年将要结束，又到了一年一度的活动期了，为了展现喜庆的节日气氛，活动页面动态效果必不可少。先上效果图：一、整体分析从图中可以看到主要的动态效果有...

2020-10-16

85浏览

0评论

通过css3背景控制属性+使用颜色过渡实现渐变效果

css3背景图像相关兼容性：IE9+background-clip 背景图片绘制区域background-clip:border-box; 内容区<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta...

2020-10-16

232浏览

0评论

CSS3中新增的对文本和字体的设置

文字阴影text-shadow: 水平偏移垂直偏移模糊颜色兼容性：IE10+<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document<...

2020-10-16

74浏览

0评论

Css和JS实现下划线动效的方法示例

本文主要讲述两种下划线动效效果，第一种悬停时 X轴由内向外展开实现动画效果，第二种为左右自动展示，由左向右，或由右向左！！实现的主要效果是利用伪类标签，以及hover,利用transfromm...

2020-10-16

63浏览

0评论

css3使用animation属性实现炫酷效果(推荐)

animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画animation-name属性为动画指定一个名称animation-name兼容主流的浏览器，不过还是需要加前缀去兼容animati...

2020-10-16

131浏览

0评论

css实现不同浏览器下兼容文本两端对齐

在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如：比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者...

2020-10-16

110浏览

0评论

CSS中display flex整理（布局利器）

关于display：flex布局，有人了解颇深，我也是看着别人的东西学习的。display：flex的布局是什么、基本概念之类的我根本就不了解，只会用。每次看到概念之类的东西，我都是扫一眼就过去...

2020-10-16

180浏览

0评论

CSS实现多层嵌套结构最外层旋转其它层不旋转效果

有这样一个场景：一个圆形容器，最外层容器的背景为圆弧，现在要将最外层的圆弧进行旋转，保证里面的容器里面的内容不进行旋转，接下来将跟大家分享一种解决方案，先看下最终实现的效果...

2020-10-16

67浏览

0评论

CSS优先级的两种理解方式

方式一：值相加
我们先去MDN看看官方的解释：优先级是如何计算的？优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级...

2020-10-16

140浏览

0评论

css实现3d立体魔方的示例代码

今天来做一个简单的3d魔方先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了一、我们先准备好们的html代码<!DOCTYPE html><html lang="zh-CN"> <head> <tit...

2020-10-16

130浏览

0评论

css3翻牌翻数字的示例代码

今天接到公司一任务，效果图如下：没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。效果预览，新窗口打开：https://codepen.io/andy-js/pen/ExaGxaL...

2020-10-16

96浏览

0评论

纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）

移动端移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { disp...

2020-10-16

89浏览

0评论

CSS 实现鼠标放在上面时整行变色效果

摘要:下文讲述css中实现鼠标放在指定行上面时，整行变色的方法分享，如下所示:实现思路:使用:hover伪类，实现当鼠标指向时，其背景色发生相应的变化，如下例所示:例：下文中的div，当鼠标...

2020-10-16

184浏览

0评论

css中overflow:hidden失效问题的解决方法

失效原因今天在写轮播图的时候发现，overflow;hidden;竟然能失效，发现原因如下：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外...

2020-10-16

热门文章