
前端——CSS
哈哈hyc
这个作者很懒,什么都没留下…
展开
-
css3字体背景颜色跑马灯
页面效果CSS .title { border: 0px; font-size: 200%; font-weight: bold; float: left; line-height: 1.5; width: 100%; padding-left: 5px; margin-top:0px;原创 2020-10-09 14:04:31 · 702 阅读 · 0 评论 -
-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象
css3中-webkit-overflow-scrolling使用方法-webkit-overflow-scrolling: touch; //有回弹效果-webkit-overflow-scrolling: auto; //滑到哪停到哪实现滚动回弹效果的页面布局 (实战)html<div class="containBox no-scrollbar"> ...原创 2019-08-12 14:42:50 · 1519 阅读 · 0 评论 -
推荐一个为按钮加好看的css网站,大家可以参考一下
大家还在为怎么样做出好看的按钮而劳心吗,下面有一些样式可以参考参考参考代码参考网址地址:https://cssfx.dev/原创 2019-06-26 09:32:38 · 2176 阅读 · 0 评论 -
stylus的基本用法
1.语法Stylus的语法花样多一些,它使用“.styl”的扩展名,Stylus也接受标准的CSS语法,但是他也接受不带花括号和分号的语法,如下所示:/* style.styl */h1 { color: #0982C1;}/* 省略花括号 */h1 color: #0982C1;/* 省略花括号和分号 */h1 color #0982C12.变量你可以在...原创 2019-04-30 22:55:19 · 4099 阅读 · 0 评论 -
CSS3 文字边框 -webkit-text-stroke 镂空的字体制作
CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用color: transparent属性,还可以创建镂空的字体!-webkit-text-fill-color可以填充中间的颜色部分,可以自己尝试一下!h2{ font-size: 36px; col...原创 2019-01-14 13:20:24 · 13181 阅读 · 2 评论 -
CSS改变input光标颜色
我们可能会有改变input光标颜色的需求,谷歌浏览器的默认光标颜色是黑色的,我们可以看到其他网站上面可以有不同的颜色,那么这个用CSS怎么改变呢? 这种效果有两种实现方式:1.使用color来实现光标的颜色是继承自当前输入框字体的颜色,所以用color属性即可改变:input{ color:red;}2,使用caret-color来实现上一种方...原创 2019-01-08 15:20:40 · 2834 阅读 · 0 评论 -
前端开发注意事项个人参考
一、html页面结构1、标签尽量使用语义化标签,使人一目了然,下面是一些常见的语义化标签<header></header>:通常包括网站标志、主导航、全站链接以及搜索框。<nav></nav>:标记导航,一般用于主要的导航栏<main></main>:页面主要内容 <article>&l原创 2018-12-30 19:18:44 · 1155 阅读 · 0 评论 -
解决Firefox中select选中时的虚线框问题
在前端页面需要下拉框的时候,不部分人还是会选择select情况的,不过还是可以自己手写一份,但是在select的时候要考虑到各种兼容问题,下面就是解决火狐浏览器select选中虚线的问题。select:focus{ outline: 0; border: 0;}这种方法是无效的。以下为正确的处理办法select:-moz-focusring{ color: transpar...原创 2018-11-19 09:40:31 · 1054 阅读 · 0 评论 -
6种css3鼠标滑过动画效果
<html><head> <meta charset="utf-8" /> <title>6种css3鼠标滑过动画效果</title> <style type="text/css"> /*****全局样式*****/ * { padding原创 2018-09-27 16:11:03 · 4669 阅读 · 0 评论 -
css3中制作淡出淡入动画
大部分网页对于一些信息的提醒都是使用了一个淡出淡入的显示效果。本人在开发中使用定时器实现淡出淡入的效果时遇到了一个严重问题,在一些浏览器上清楚定时器时有时候无效果,但使用debugger跟踪又没有事,最后实现没有办法,想到了CSS3提供的动画效果,于是就使用CSS3来实现提示信息的淡出淡入效果。1.使用@keyframes 创建淡出淡入效果。@keyframes fadeio { ...原创 2018-09-27 15:57:59 · 12771 阅读 · 0 评论 -
图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:.circleprogress{ width: 160px; height: 160px...原创 2018-09-14 15:57:26 · 498 阅读 · 0 评论 -
display:inline-block的间隙问题和解决办法
1、display:inline-block在水平方向的间隙;代码如下:<style type="text/css">* { margin: 0; padding: 0;}.test { width: 600px; border: 1px blue solid;}.test div { width: 100px; ...原创 2018-09-05 10:02:54 · 8285 阅读 · 2 评论