Web前端学习整理(七)

圆角

-border-radius:利用元素的边框创建圆角效果,取值单位通常是%或者px.

-border-radius: 左上 右上 右下 左下;

-border-radius: 左上 右上左下 右下;

-border-radius: 左上右下 右上左下;

--border-radius: 四角;

---

阴影

-box-shadow:为元素周边创建投影效果,便于观看.

-box-shadow: x y  blur spread color direction;

        -x:水平偏移(必须设定)

        -y:垂直偏移(必须设定)

        -blur:模糊距离,表示从扩散边缘开始向外侧模糊的距离

        -spread:扩散距离,表示从何处开始模糊

        -color:表示模糊的颜色

        -direction:表示模糊的方向(ouset向外,inset向内)

---

透明

opacity:用于规定元素的透明度,取值:0~1,0为完全透明,1为完全不透明.

---

鼠标样式

cursor:利用鼠标样式属性来改变鼠标指针的样式,可以方便交互.

        -auto 浏览器自动选择合适当前上下文的光标属性

        -default 默认的指针属性

        -pointer 手型指针,便是链接可以被点击

        -crosshair 十字准心,表示可以选中操作

        -move 移动指针,表示元素可以被拖动

        -text 文本指针,便是内容可以被编辑

        -not-allowed 禁止符号,表示禁止进行某种操作

---

渐变

使用gradient来创建元素背景或者文本颜色的渐变效果,css提供了两种类型的渐变:线性渐变和径向渐变

        -线性渐变:

        - 指在两个及以上的颜色之间呈现一种平滑的过渡效果, 指定渐变的起点和终点，并定义颜色的分布方式

        - 该效果是矢量效果，不会因为页面的放大而出现模糊的情况

        -默认方向是从上到下,可以在写颜色值之前加上方向控制

                

                向上 to top

                向右 to right

                向左 to left

                向右上角 to right top

                向右下角 to right bottom

                向左下角 to left bottom

                向左上角 to left top

        -也可以使用角度值来控制方向(deg)

background: linear-gradient(red, blue);
background: linear-gradient(red 0%, blue 100%);

        -径向渐变:是从一个中心点向外辐射出颜色平滑过渡的渐变效果,可以通过指定渐变的中心点,半径和颜色分布方式来创建径向渐变. 

        -radial-gradient(shape  position, color-stop)

要使用学习可寻找相关文档,不予过多介绍.