![](https://img-blog.csdnimg.cn/20190321105238265.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS样式专栏
CSS3各种效果
就像风1样
这个作者很懒,什么都没留下…
展开
-
css3实现动画效果完整代码demo
过渡渐隐适合两张图片调整其中一个透明度,完整代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />...原创 2019-08-06 11:02:35 · 5739 阅读 · 0 评论 -
CSS布局flex布局 对齐 等分 均分 详解
一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到float属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在float: center的写法,那么text-align: center、verticle-align: center是否...原创 2019-04-23 10:01:09 · 35795 阅读 · 0 评论 -
CSS用flex布局两端对齐,列不满左对齐
布局上要求两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行不能左对齐,而是两端对齐方式。# 网上查了一些资料,有两种方法可以实现效果:**1.添加几个空item**(对我来说最有效的,适用于大多数场景)根据布局列数添加空item,比如每行最大n列,那么在最后添加n-2个空i...原创 2019-04-19 11:30:10 · 16171 阅读 · 0 评论 -
css3循环360度图片旋转
上个效果图首先这是一张静态的 png图片是通过添加 CSS 样式让图片旋转起来的,不是GIF动态图!代码如下:css:.noDataImg{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s ...原创 2019-03-21 10:36:36 · 6619 阅读 · 0 评论 -
js禁止滚动条滚动并且隐藏滚动条
禁止鼠标滑过滚动条滚动document.body.onmousewheel = function () {return false;}恢复鼠标滑过滚动条滚动document.body.onmousewheel = function () {return true;}禁止键盘控制滚动条滚动document.body.onkeydown = function (e) { ...原创 2019-03-14 11:58:06 · 7164 阅读 · 1 评论 -
vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用第一种方法原因:scoped解决方法:去掉scoped注意:此时该样式会污染全局样式,可以把它放在公共的css里面为了不让所有的 el-input标签都是该样式,可以在HTML给改input加上一个类名,比如 modInput第二种方法这不去掉scop...原创 2019-03-13 15:27:59 · 16394 阅读 · 2 评论 -
css3绘制常见的30种形状(心形,五角星,六边形,钻石,对话框,阴阳鱼图等)
CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点,下面是css3的部分用法,在此总结一下,以供需要的朋友们,总共30个例子长方形#Rectangle{ width: 200px; height: 50px; ...原创 2019-03-12 11:21:25 · 3250 阅读 · 1 评论 -
CSS背景设置定位滚动
适用于body背景图,页面滚动时随页面滚动。相当于设置了定位background:#205424url(//images.cnblogs.com/cnblogs_com/zyf0163/731133/o_4.jpg) no-repeat top center fixed;background-size:100% 100%;...原创 2019-03-11 10:51:27 · 699 阅读 · 0 评论 -
css如何去掉重叠部分的边框
边框border属性是经常会用到的一个属性,它可以给元素添加边框;但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起边框重叠可以分为两种情况,分别为:1、div,ul等元素盒子设置边框后的重叠问题2、table表格设置边框后的重叠问题1、div,ul等元素盒子设置边框后的重叠问题<!DOCTYPE html><html> ...原创 2019-03-08 11:08:41 · 2686 阅读 · 0 评论 -
CSS阴影样式大全(包含所有样式: demo代码全)看图看代码
常用的样式:下面还有特殊的效果 <html><head> <title></title> <style type="text/css">/*<!-- ———————————— 最简单的常规效果 —————————————————————— -->*/.flex{display:fl原创 2019-02-20 17:08:18 · 28305 阅读 · 7 评论 -
css修改滚动条的默认样式(页面及div元素等...的滚动条)
直接上代码了html代码<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内原创 2019-02-18 11:06:46 · 1027 阅读 · 0 评论 -
CSS入门知识
1. CSS 入门知1.1 关于 Web 标准 Web 标准不是某一个标准,而是一系列标准的集合。 网页主要由四部分组成:内容(Content)、结构(Structure)、表现(Presentation)和行为(Behavior)。 1) 内容:就是制作者放在页面内真正想要访问者浏览的东西,如:图片、文本、多媒体等(内容为王)。 2) 结构:使内容更加具有逻辑性和易用性,更清...原创 2018-12-07 10:37:32 · 218 阅读 · 0 评论 -
关于span标签,元素多时,换行没自动一整块下去,中间截断
只要 给父级盒子加上 css样式就可以了!用flex布局!然后子元素就会自适应换行!<style> /* body{ display: flex; justify-content: flex-start; flex-wrap: wrap; } */</style>...原创 2018-11-26 08:31:41 · 3814 阅读 · 0 评论 -
css让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器
如果是个背景图的话,定义一个div,高100%,宽100%,里面放个img<div class='bg'> <img src="images/bg.jpg" ></div>html,body{overflow: hidden;}.bg{width: 100%;height: 100%;top:0;z-index: -1; position...转载 2018-11-26 08:17:28 · 1737 阅读 · 0 评论 -
常用css上下布局-上边高度固定,下边高度自适应
上下两个盒子,上边的固定,下面的自适应<div class= "container"> <div class="left"></div> <div class="right"></div></div> <style>.con原创 2018-11-09 15:39:20 · 2386 阅读 · 0 评论 -
css3 display:flex;(flex布局)+img标签在div中水平垂直居中
img标签在div中水平垂直居中--两种实现方式第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle; width: 400px; ...原创 2018-11-08 11:40:51 · 2025 阅读 · 0 评论 -
CSS 元素超出部分滚动, 并隐藏滚动条(2种方法)
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>超出部分隐藏滚动条</title></head&原创 2018-09-14 10:41:52 · 8882 阅读 · 2 评论 -
CSS3 - 使用媒体查询(media query)适配布局
CSS3 - 使用媒体查询(media query)适配布局1,媒体查询的作用 1 2 3 @media (media-feature-name: value) { /* 符合条件时应用的样式 */ } 上面是媒体查询的基本结构,根据查看网页的设备的某些重要信息(比如屏幕大小、分辨率、颜色位深等),页面可以分别...原创 2018-09-07 10:37:29 · 3302 阅读 · 0 评论 -
css溢出省略号文字单行,多行多出的...
boy 火巨如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢...原创 2018-05-17 09:59:08 · 170 阅读 · 0 评论 -
CSS选择器 渐变背景
boy 火巨css选择器CSS分组选择 td,div,ul,li 将同样样式应用于多个选择器,以逗号分隔 示例:td,div a,body{ font-size: 16px; } CSS相邻选择器 e1+e2 选择紧贴在e1元素之后的e2元素,相邻选择符只会选择符合条件的相邻的兄弟元素 示例:p + p { color: red; } E:focu...原创 2018-05-17 09:56:27 · 871 阅读 · 0 评论 -
css圆角设和内阴影兼容
boy 火巨圆角设和内阴影兼容.boder-radius{ -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome、safari等)-moz-border-radius:6px;//适配firefox浏览器-ms-border-radius:6px;//适配IE浏览器-o-border-radius:6px;//适配opera浏览器border-ra...原创 2018-05-17 09:42:13 · 730 阅读 · 0 评论