博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css中一些常用技巧
阅读量:5060 次
发布时间:2019-06-12

本文共 2080 字,大约阅读时间需要 6 分钟。

// css中引入字体文件@font-face {    font-family: msyh; /*这里是说明调用来的字体名字*/    src: url('../font/wryh.ttf'); /*这里是字体文件路径*/}*{    font-family: wryh.ttf;}

 去掉select的小三角

appearance:none;    -moz-appearance:none; /* Firefox */    -webkit-appearance:none; /* Safari 和 Chrome */
select::-ms-expand { display: none; } //清除ie的默认选择框样式清除,隐藏下拉箭头

 

background 属性

body{ background: url(bgimage.gif) scroll transparent; }//background:transparent。意思就是背景透明//background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。//scroll:默认值。背景图像会随着页面其余部分的滚动而移动。//fixed:当页面的其余部分滚动时,背景图像不会移动。

 首行缩进

text-indent:5px; // 属性规定文本块中首行文本的缩进。//注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。

 css设置文字不换行,超过的部分用“...”代替

//设置文字不换行,超过的部分用“...”代替 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 200px;//除width属性外,顺序不要颠倒哦! // 必须放在一个块元素内,而且这些属性都是加给该块元素的,例如:放在一个td 内,则需要在td内在添加一个块元素,否则无效。

 prototype属性可以向对象添加属性和方法

object.prototype.name=value;

 box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

//为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

  //通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;

 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用

p{  outline:#00FF00 dotted 3px;  }//可以按顺序设置如下属性:outline-coloroutline-styleoutline-width

 @keyframes(关键帧) ,后面是一系列动画规则

 
//@keyframes animationname {
keyframes-selector {
css-styles;}}

 //通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

 // 在动画过程中,您能够多次改变这套 CSS 样式。 0% 是动画的开始时间,100% 动画的结束时间。

@keyframes mymove{0%   {top:0px;}50%  {top:100px;}100% {top:0px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px;}50%  {top:100px;}100% {top:0px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{0%   {top:0px;}50%  {top:100px;}100% {top:0px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px;}50%  {top:100px;}100% {top:0px;}}

 opacity 设置元素的不透明级别,0为完全透明,1为完全不透明

 

rgba()

RGBA(R,G,B,A)取值:A:Alpha透明度。取值0~1之间。 说明:RGBA记法。此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。

  设置input输入框为只读属性 : readonly

 

textarea超出部分换行显示

white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;

 

`

 

转载于:https://www.cnblogs.com/chrdai/p/6104496.html

你可能感兴趣的文章
PIGOSS
查看>>
几款Http小服务器
查看>>
iOS 数组排序
查看>>
第三节
查看>>
PHP结合MYSQL记录结果分页呈现(比较实用)
查看>>
Mysql支持的数据类型
查看>>
openSuse beginner
查看>>
Codeforces 620E(线段树+dfs序+状态压缩)
查看>>
Windows7中双击py文件运行程序
查看>>
Market entry case
查看>>
bzoj1230 开关灯 线段树
查看>>
LinearLayout
查看>>
学习python:day1
查看>>
css3动画属性
查看>>
第九次团队作业-测试报告与用户使用手册
查看>>
Mongodb 基本命令
查看>>
控制文件的备份与恢复
查看>>
返回代码hdu 2054 A==B?
查看>>
iOS 8 地图
查看>>
PHP的SQL注入技术实现以及预防措施
查看>>