CSS3
关注
分享
扫一扫
A-fish
这个作者很懒，什么都没留下…
展开
-
CSS 盒子模型( Box Model)
所有HTML元素可以看做盒子，在CSS中， 'box model' 这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充 ，和实际内容原创 2021-08-15 10:56:00 · 140 阅读 · 0 评论 -
H5C3新特性
css3新特性1.颜色：新增RGBA，HSLA模式2. 文字阴影（text-shadow）3. 边框： 圆角（border-radius）边框阴影： box-shadow4. 盒子模型：box-sizing5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局6. 渐变：linear-gradient、radia...原创 2021-08-04 11:54:18 · 168 阅读 · 0 评论 -
css3 实现简单动画效果
1.简单loading效果<div class="mint-spinner-snake" style="border-top-color: rgb(38, 162, 255); border-left-color: rgb(38, 162, 255); border-bottom-color: rgb(38, 162, 255); height: 88px; width: 88px;"></div>CSS样式部分：.mint-spinner-snake{ an...原创 2021-08-04 11:41:02 · 468 阅读 · 0 评论 -
css 相关 为什么z-index不生效？ 如何让子元素不继承父元素的opacity
1.为什么z-index不生效？Z-index 仅能在定位元素上生效，所以给div的style加上z-index:-1的同时，要记得加上position:absolute;或者position:fixed;或者position:relative;，才能生效。对于默认的position:static不生效2.如何让子元素不继承父元素的opacity解决方案：把涉及到opacity的父元素的opcity的透明度写法换成background:rgba()形式写背景色3.input placeh..原创 2020-09-01 14:08:04 · 1663 阅读 · 0 评论 -
vue 中scoped 和 deep的用法深究
前言我们都知道在组件中给style标签添加scoped属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。这个是怎么做到的呢？原理在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么久使得当前组件内的样式只会作...转载 2019-07-19 16:45:50 · 3758 阅读 · 0 评论 -
H5C3 css3实现div 模拟Input框 应用场景：输入地址的输入框 不用textarea的情况下（输入框超过宽度自动换行）
<!DOCTYPE html><html><head> <title>css3 语法实现div模拟Input</title> <style type="text/css"> /* div模拟输入框*/ .imitate-input{ ...原创 2019-07-29 14:46:23 · 1810 阅读 · 0 评论 -
解决p标签自动换行文字两端不对齐问题
<!DOCTYPE html><html><head><title>vue </title><style type="text/css">*{ margin:0px; padding:0px;}.duiqi{ /*解决p标签自动换行文字两端不对齐问题*/ text-align: justify; /*实...原创 2019-07-17 18:52:28 · 5361 阅读 · 0 评论 -
input输入框字数超出长度显示省略号...
<!DOCTYPE html><html><head> <title>长度超过限制</title></head><body> <input type="" name="" style="overflow:hidden; white-space:nowrap; text-overflow:...原创 2019-07-25 17:48:33 · 15892 阅读 · 0 评论 -
工作中用Img标签和用background-image的区别？以及什么时候建议用Img标签？什么时候用背景图
如下场景使用img标签比较合适：如果图像是等内容的一部分或图表或人，使用Img标签加上alt属性。 如果需要打印页面并且默认情况下打印图片则使用IMG。 使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。 如果配合 z - ind...原创 2019-07-19 16:39:18 · 1800 阅读 · 0 评论 -
css3 新加选择器 排除选择器 :not()
css :not()排除函数css:not()函数用来排除选择，not(x),其中的x为css选择器，但是x不能是not选择器，也就是说:not()排除选择器不能嵌套使用。css:not()排除选择器使用 .sibcont{ background:#f1f1f1; border:1pxsolid#bababa; margi...转载 2019-05-29 18:10:24 · 26739 阅读 · 0 评论 -
css3 伪元素常用场景
https://www.cnblogs.com/guangzhou11/p/7360589.html转载 2019-04-29 18:09:35 · 683 阅读 · 0 评论 -
vue 封装 下拉选择框 actionSheet, dropDown ,类似mint-ui中的actionSheet
一，封装蒙层Popup 框---带淡入淡出渐变效果的<template> <transition name="rytpopup-transition"> <div class="rytPopup" v-show="visible" @click="closeRytpopup"> <slot><...原创 2019-05-22 17:51:24 · 3865 阅读 · 0 评论 -
vue 组件封装 按钮button 支持点击按钮带阴影效果和Loading加载效果
一，子组件shadowButton<template> <!-- 此组件支持自定义按钮文字和自定义按钮图片 --> <button :style="{backgroundColor:btnBgc,color:btnColor,width:width,height:height,fontSize:fontSize,boxShadow:boxShado...原创 2019-05-27 15:07:40 · 7616 阅读 · 0 评论 -
label标签应用场景 以及介绍 增大表单点击区域
https://blog.csdn.net/gnail_oug/article/details/72852150转载 2019-05-27 15:13:31 · 671 阅读 · 0 评论 -
vue 组件封装 确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽
一，子组件 modalConfirm.vue文件封装<template> <div class="confirmBgc animations" :style="{backgroundColor:rytColor}" v-show="show"> <div class="rytContainer" :style="{borderRadius...原创 2019-05-23 15:51:55 · 4849 阅读 · 0 评论 -
vue 组件封装 抽奖随机数
一，子组件<template> <div> <slot></slot> </div></template><script> export default { name:'countUp', props:{ ...原创 2019-05-31 15:30:56 · 2126 阅读 · 0 评论 -
animation 停留在最后一帧 逐字显示
<!DOCTYPE html><html><head> <title>逐次展示 动画停留在最后一帧</title> <style type="text/css"> .animation{ animation:mymove 5s linear; ...原创 2019-05-31 16:59:31 · 3416 阅读 · 0 评论 -
原生js实现点击按钮带水波纹效果
<!DOCTYPE html><html><head> <title>按钮点击水波纹效果jquery</title> <style type="text/css"> *,*:after,*:before { box-sizing: border-box;}html { -...原创 2019-05-29 17:54:11 · 2463 阅读 · 0 评论