偏门却又实用的 CSS 样式

Michael_Ding 发布于2019-04-23 11:55 / 1235人阅读

摘要：实现不换行自动换行强制换行不换行自动换行强制换行常用的选择器以下代码是选择父类下第一个子节点，元素，建议学习这个样式属性的使用，很实用的。不允许负值用百分比指定起止色位置。

::-Webkit-Input-Placeholder

input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。

配合 opacity 属性使用效果更好

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inpput_Placeholder（输入框）title>
    <style>
        input{
            color: red;
        }
        ::-webkit-input-placeholder{
            color: blueviolet;
            opacity: 0.5;
          }
        ::-moz-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
        :-moz-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
        :-ms-input-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
    style>
head>
<body>
登录：<br>
<input type="text" placeholder="请输入账号"><br>
<input type="text" placeholder="请输入密码">
body>
html>

Outline 当点击Input元素时显示的当前状态线（外发光）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outline 外发光title>
    <style>
        input{
            width:400px;
            height:100px;
            font-size: 20px;
        }
        .txt_one{
            outline: none;
        }
        .txt_two{
            outline:none;
            box-shadow: green 1px 1px 30px 5px;
        }
        p{
            width:500px;
            height: 200px;
            border: 1px solid red;
            margin: 30px auto;
        }
    style>
head>
<body>
<input type="text" class="txt_one" placeholder="请点击这三个输入框比较效果">
<input type="text" class="txt_two" placeholder="请点击这三个输入框比较效果">
<input type="text" class="txt_three" placeholder="请点击这三个输入框比较效果">
<br>
<p>
    边框阴影（box-shadow）的基本语法：<br>

box-shadow：color  h-shadow  v-shadow blur spread  inset；<br>

color：阴影颜色 ------------ 可选 <br>

h-shadow ：水平偏移量 ----必选 <br>

v-shadow：垂直偏移量-----必选 <br>

blur：模糊距离 -------------可选 <br>

spread：阴影尺寸---------- 可选 <br>

inset：内阴影 --------------可选 <br>
p>
body>
html>

Contenteditable 设置Element是否可编辑

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contenteditable 设置Element（标签）可否编辑title>
head>
<body>
<p contenteditable="true">可编辑p>
<span contenteditable="false">不可编辑span>
body>
html>

Webkit-Playsinline

手机video 都可以在页面中播放，而不是全屏播放了。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。
HTML里video必须加上webkit-playsinline属性 <br>
<video id="video" controls="controls" webkit-playsinline="true" src="zaa47.mp4">
    
Your browser does not support HTML5 video.
video>
body>
html>

Position: Absolute，让Margin有效的

设置left:0, right:0 就可以。原因是2边都是0不存在边距，element就可以得出距离，并居中。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Positon: Absolut （让Margin更有效）title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0 auto;
        }
    style>
head>
<body>
<div>div>
body>
html>

这个太简单了，不发了。

使用 Clearfix 清楚浮动，解决父类高度崩塌。

.clearfix {
    zoom: 1;
}

.clearfix:after {/*http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after*/
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

这个不知道怎么说

User-Select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

::-Webkit-Scrollbar-Thumb可以修改谷歌的滚动条样式，safari好像也可以

使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug

-webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

Transform-Style: Preserve-3d 让元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

Perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
    perspective: 400px; 
}

Css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;

常用的选择器 :Nth-Child() Selector

以下代码是选择父类下第一个子节点，p元素，建议学习这个样式属性的使用，很实用的。

p:nth-child(1) {
    ...
}

Css3 Linear-Gradient 线性渐变默认开始在top, 也可以自定义方向。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3 Linear-Gradient 线性渐变title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
            float: left;
        }
        p{
            clear: both;
        }
        .txt1{
            background: linear-gradient(aqua,red);
        }
        .txt2{
            background: linear-gradient(aqua,black 50%,red);
        }
        .txt3{
            background: linear-gradient(0deg,aqua 20%,black 50%,red 80%);
        }
        .txt4{
            background: linear-gradient(45deg,aqua,black 50%,red);
        }
        .txt5{
            background: linear-gradient(to top right,aqua,black 50%,red)
        }
    style>
head>
<body>
<div class="txt1">div>
<div class="txt2">div>
<div class="txt3">div>
<div class="txt4">div>
<div class="txt5">div>
<br>
<p><br>
    下述值用来表示渐变的方向，可以使用角度或者关键字来设置： <br>
angle：
用角度值指定渐变的方向（或角度）。 <br>
to left： <br>
设置渐变为从右到左。相当于: 270deg <br>
to right： <br>
设置渐变从左到右。相当于: 90deg <br>
to top： <br>
设置渐变从下到上。相当于: 0deg <br>
to bottom： <br>
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <br>
color-stop 用于指定渐变的起止颜色： <br>
color：
指定颜色。 <br>
length：
用长度值指定起止色位置。不允许负值 <br>
percentage：
用百分比指定起止色位置。 <br>
p>
body>
html>

专线服务混合云 css的样式 html的css样式 css样式页面css样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1351.html

2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0
列举几条常用的CSS reset，是否了解normalize.css

摘要：相比于传统的是一种现代的为准备的优质替代方案。总之，是一种的替代方案。一般化的样式为大部分元素提供。保护了有价值的默认值通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优...

Airy 2019-08-30 11:24 评论0 收藏0
CSS进阶篇--Normalize.css的使用（重置表）

摘要：相比于传统的，是一种现代的为准备的优质替代方案。保护了有价值的默认值通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。这就意味着你不用再为所有公共的排版元素重新设置样式。任何人都能够提交问题报告或者提交补丁。本文译自Normalize.css官网: http://nicolasgallagher.com/a... Normalize.css 只是一个很小的CSS文件，但...

dack 2019-08-28 18:16 评论0 收藏0