css3
文章平均质量分 61
小爱同学-Allen
一花一世界,一叶一菩提
展开
-
说说em/px/rem/vh/vw的区别?
说说em/px/rem/vh/vw的区别?原创 2023-02-14 14:23:02 · 520 阅读 · 0 评论 -
vue css中/deep/及>>>用法
/deep/ 深度选择器 在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加父组件: <template> <div> <h1 class="title">{{ name }}</h1> <input type="text" v-model.lazy="name"> <child /> </div> </template>原创 2021-04-21 15:31:26 · 1827 阅读 · 0 评论 -
ios 里面hover的兼容问题
最近在做手机端跟pc端一套代码自适应的,用的是@media,手机端是用rem,正常我们写样式会用到hover这个css,可是在ios就会出现兼容问题,今天刚好解决了,随便记录下 a:hover 设置的样式在ios系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 1、js代码document.bo...原创 2020-03-24 17:37:16 · 800 阅读 · 0 评论 -
Css3之画哆啦A梦
最近学习完css3画图,然后就百度找了看有没有好的练手机会,看到别人博客上面有画哆啦A梦,还有小黄人,就自己看了哆啦A梦的来巩固下Css3的知识,先看看效果图 我们把这个图拆分开来,分为上下两部分,上面是头部和身体,头部主要难画的是胡须,胡须的画法是通过画椭圆,然后用border-bottom:1px solid #000,椭圆的背景颜色设置为透明background:transparent,然...原创 2019-08-27 11:46:23 · 562 阅读 · 0 评论 -
Css3之画八卦图
今天我们通过前面所学的知识来画个八卦图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>八卦图</title> </head> <body> <div class="bagua"></div&g...原创 2019-08-27 11:21:45 · 268 阅读 · 0 评论 -
Css3之画心形跟蛋形
今天我们来学习下如何画心形跟蛋形,心形是由两个圆角下面直角的组成的,然后通过移动叠加在一起如下图 蛋形是根据border-radius的四个值/前四个表示x轴,后四个边上y轴,数值越大变的越小/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>心形跟蛋&...原创 2019-08-27 11:16:54 · 312 阅读 · 0 评论 -
css3之如何画三角形
在以前的工作中我们如果想用三角形这个图标只能找UI拿图标,可是如果很多地方都有用到这个图标只会增加http的请求,会降低性能,今天我们就来学习下如何画三角形,效果图如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>triangle三角形的绘制</...原创 2019-08-17 16:39:20 · 430 阅读 · 0 评论 -
border-radius的使用
border-radius的基本使用,使用border-radius画半圆 在日常项目过程中,border-radius这个属性算是非常常用的属性之一了,通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。 <!DOCTYPE html> <html> <head> <meta ...原创 2019-08-17 16:25:54 · 4601 阅读 · 0 评论 -
Css3之五边形跟六边形
今天我们来讨论下如果做五边形跟六边形,五边形可以拆成梯形跟三角形组合起来(还有个思路就是三个三角形,两个钝角的,然后通过transform旋转得到五边形,这个大家自己去试试),六边形可以拆成两个三角形和一个长方形 我们先来了解下梯形如何做 梯形 .trapezoid{ width:50px; border-top: 50px solid red; border-bottom: 0px so...原创 2019-08-22 11:06:20 · 1373 阅读 · 0 评论 -
css3伪元素的使用
今天我们来学习下如何使用Css3的伪元素 1. “first-line” 伪元素用于向文本的首行设置特殊样式。 注释:“first-line” 伪元素只能用于块级元素。 2.“first-letter” 伪元素用于向文本的首字母设置特殊样式: 注释:“first-letter” 伪元素只能用于块级元素。 3":before" 伪元素可以在元素的内容前面插入新内容。 4":after" 伪元素可以在...原创 2019-08-16 16:45:02 · 889 阅读 · 0 评论 -
Css3之画五角星跟六角星
今天我们就用css3来画五角星跟六角星,里面用到了css3的伪元素还有三角形组合起来的 五角星 分三部分,两个钝角三角形在下面叠加在一起,上面一个三角形 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五角星和六角星</title> <...原创 2019-08-21 17:07:50 · 1103 阅读 · 0 评论 -
Css3之画菱形和平行四边形
Formal grammar: <transform-function> [<transform-function>]* | none原创 2019-08-21 16:54:50 · 803 阅读 · 0 评论 -
Css3之画对话框
在日常生活中,对话框还是蛮经常看到的,比如聊天工具中,今天我们就来学习下如果做这种对话框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dialaing</title> </head> <body> <d...原创 2019-08-21 16:19:26 · 917 阅读 · 0 评论 -
伪类选择器
今天我们来研究下css的伪类选择器,代码跟效果图如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a:hover{ color:red...原创 2019-08-15 16:52:00 · 95 阅读 · 0 评论 -
css3之结构伪类选择器
结构伪类选择器主要有哪些 first-child last-child nth-child(2n) nth-of-type() first-of-type last-of-type only-child empty 首先我们先把今天要做的效果给大家展示下,今天要做的是在这个案例的基础上添加,话不多说,上代码跟截图 <!DOCTYPE html> <html> <...原创 2019-08-14 14:06:22 · 556 阅读 · 1 评论 -
css3敲门砖
Hello World欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用M...原创 2019-08-13 16:42:00 · 136 阅读 · 0 评论