css
关注
分享
扫一扫
gzyzwx
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css3 边框实现圆角内凹效果 边框内凹圆角效果
border-radius: 20px; 会有圆角效果，但是效果是向外的；效果截图：（移动端展示也一样）想要实现 （边框圆角内凹效果）查阅资料，暂无属性可设置，只能自己撸；（思路是实现四个圆角然后遮挡在四个边角，实现。）注意有坑实现方案一<html><head> <meta name="viewport" content=...原创 2020-01-19 11:26:41 · 8133 阅读 · 0 评论 -
background-position x/y的取值为啥是负值
1、可以这样理解background-position的元素的左上角为顶点（0，0），xy正方向是朝右朝下的，元素左上角要回到容器左上角，这个时候，整个背景图需要向上和向左偏移，则x和y都是负值，这个时候，整个背景图中，你想要展示的图案，就会往左上移动，所以说使用background-position的值都是负值。图例图中的图案，就是元素；...原创 2019-04-17 20:17:05 · 1843 阅读 · 0 评论 -
微信小程序使用自定义字体图标 （亲测方法）
场景1、设计图上面很多纯色icon，比如搜索icon，右箭头icon2、让设计师根据iconfont的图标制作规则 链接如下https://www.iconfont.cn/icons/upload?spm=a313x.7781069.1998910419.d1baf4ee7制作svg图片3、上传图片到iconfont，添加到购物车，然后下载代码4、本地项目，新建iconfont....原创 2019-03-28 15:57:15 · 1273 阅读 · 0 评论 -
css3 :first-child、:nth-child(1)选择第一个元素不起作用的解决方案
当我写一段页面结构如下（以微信小程序为例，传统网页div结构是一样的道理）<view class='seller-info-container'> <view class='seller-avatar-content'> <image></image> </view> <view clas...原创 2018-10-25 11:46:23 · 24935 阅读 · 0 评论 -
css3 实现无限循环渐变进度条
以下以小程序标签为例，可以直接改view => div 适用于传统网页wxml文件<view class="bg-default"></view>wxss文件.bg-default { animation-duration: 1s; /* 动画时长1s */ animation-fill-mode: forwards; ...原创 2018-10-16 15:53:26 · 4309 阅读 · 1 评论 -
css3 隐藏滚动条 （微信小程序隐藏滚动条）
需要了解的css3属性MDN传送门::-webkit-scrollbar在微信小程序的app.wxss 设置全局通用伪类，控制滚动条样式 ::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}即可...原创 2018-09-21 10:46:38 · 3485 阅读 · 0 评论 -
css清除浮动(css 解决浮动元素引起的高度问题)
首先了解两个概念：文档流：文档流是文档中可显示对象在排列时所占用的位置。 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。 本人经常...原创 2018-08-27 18:02:07 · 1148 阅读 · 0 评论 -
行内元素如span（微信小程序text标签）等，在编辑器enter换行导致页面显示存在空格的处理
这里以微信小程序text标签为例1、产生空格代码（这里的:为英文字符）<view class='time-text'>距结束<text>{{data.countDownDay}}</text>天<text>{{data.countDownHour}}</text>:<text>{{data.countD...原创 2018-08-07 11:01:04 · 15233 阅读 · 0 评论 -
css自定义属性,操作css自定义属性的一些常见方法
跟着我左手右手一个慢动作，打开编辑器 => 创建html文件 写入以下代码css 样式表结构:root{--base-color: red;}.container{ color: var(--base-color);}html结构<div class="container" >红色字体</div>效果：页面中, 具有.container样式...原创 2018-08-11 11:35:56 · 1647 阅读 · 0 评论 -
css 实现image宽度百分百，高度跟宽度一样大小
前言：第一次写博客（不知道从何说起），希望以后再接再励。之前也遇到很多问题，有总结过，但是没有写出来（改天继续贴出其他总结），今天遇见css 实现image宽度百分百，高度跟宽度一样大小这个问题。贴出解决方案一个 1、写两个div盒子，父子关系<div class="image"><img :src="food.image"></div>2、...原创 2017-07-24 22:51:53 · 13345 阅读 · 1 评论