CSS3初体验之奇技淫巧

#border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow
border-radius

相信这个属性,写过css的同学都知道,用来产生圆角,比如画一个圆形:

div {
width:100px;
height:100px;
background:red;
border-radius:100px; //border-radius:100%;
}

然后我们来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画一个半圆

div {
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}

那如果要画一个椭圆该怎么办呢?你会发现上面的语法貌似做不到了,其实border-radius的值还有一种语法: x半径/y半径:

div {
width: 100px;
height: 50px;
background: red;
border-radius: 50px/25px;
}

如果我要画半个椭圆,又要咋办呢?

div {
width: 100px;
height: 50px;
background: red;
border-radius: 100% 0 0 100% /50%;
}

::after

这里拿个简单的例子来看,我们要画一个放大镜,如下图:

分析一下,这个放大镜可以由两个div组成,一个是黑色的圆环,一个是黑色把手(旋转45度)。所以我们就需要用两个div来实现吗?答案是NO,一个div也是可以的,我们可以借助::after来添加一个元素。同理如果需要三个div,我们还可以使用::before再添加一个元素。下面看一下代码:

div {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #333;
position: relative;
}
div::after {
content: ”;
display: block;
width: 8px;
height: 60px;
border-radius: 5px;
background: #333;
position: absolute;
right: -22px;
top: 38px;
transform: rotate(-45deg);
}

attr和content

比如我们要实现一个悬浮提示的功能。传统方法,使用title属性就能实现,但是现在我们要更美观,可以使用css3提供的attr:能够在css中获取到元素的某个属性值,然后插入到伪元素的content中去。

假如我们的html代码如下:

hello…

我们来看看实现这个插件的css代码:

div {
position: relative;
}
div:hover::after {
content: attr(data-title); //取到data-title属性的值
display: inline-block;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 5px;
position: absolute;
top: -50px;
left: -30px;
}

当hover的时候,在元素尾部添加一个内容为data-title属性值的元素,所以就实现了hover显示的效果,如下图所示:

box-sizing

我们知道,在标准盒子模型中,元素的总宽=content + padding + border + margin。 css中的盒子模型大家可能都知道,但是这个盒子模型的属性可能没有那么多人知道,box-sizing属性就是用来重定义这个计算方式的,它有三个取值,分别是:content-box(默认)、border-box、padding-box

一般来说,假如我们需要有一个占宽200px、padding10px、border5px的div,经过计算,要这么定义样式。

div {
width: 170px; //这里的宽度要使用200-10*2-5*2 = 170得到。
height: 50px;
padding: 10px;
border: 5px solid red;
}

然后我们来使用一下box-sizing属性。

div {
box-sizing: border-box;
width: 200px; //这里的宽度就是元素所占总宽度,不需要计算
height: 50px;
padding: 10px;
border: 5px solid red;
}

linear-gradient

做活动页面的时候我们经常会遇到这样的需求:

顶部的中间一张大banner图片,然后整个区域的背景色要根据图片背景色渐变。就可以使用这个属性了。

div {
width: 200px;
height: 50px;
background: linear-gradient(to right, red, yellow, black, green);
}

是不是很有趣?其实,linear-gradient还有更多有趣的功能,你可以根据下面的动图去感受一下:

你以为这就完了?等等,还有更强大的呢!repeating-linear-gradient,来感受一下:

linear-gradient还有更加强大的功能,比如它可以给元素添加多个渐变,从而达到更NB的效果。

radial-gradient

上面的linear-gradient是线性渐变,这个属性是径向渐变。下面的代码实现了一个chrome的logo。

div.chrome {
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
radial-gradient(circle, #fff 33%, transparent 33%),
linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
linear-gradient(60deg, #4CAF50 33%, transparent 33%),
linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
linear-gradient(0deg, #4CAF50 45%, transparent 45%),
linear-gradient(60deg, #4CAF50 30%, transparent 30%),
linear-gradient(120deg, #F44336 50%, transparent 50%),
linear-gradient(180deg, #F44336 30%, transparent 30%);
}

实现原理就是使用了多个渐变色放在div上,友协被遮住,视觉上就产生了想要的效果,是不是很强大!看了下图你就知道其实就是在div上加了很多个渐变。

box-shadow

上面的例子大都是对css3新属性的了解和认识,这个实例则是有关于解决方案的例子。

需求:我们要实现下面这个效果图(三个边框:黑色,绿色,红色):

解法一:假如没有css3知识,我们可以做这样做:用三个div,分别设置边框,然后分别控制宽高和位置来达到这个效果。显然,很复杂,这里就不贴代码了。
解法二:现在我们有css3的知识了,借助box-shadow就可以轻松解决这个问题。先来看看它的语法:box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色],并且还能添加多个阴影,使用逗号隔开。当然你还可以继续增加,四重边框,五重边框……都不再是问题啦。另外,还能加圆角,阴影会贴紧内层div。

使用这种方法,有一个缺点就是,不支持虚线边框。

解法三: 使用outline(只能支持两重边框)使用这种方法的缺点就是,只能支持两层的边框,而且还不能根据容器的border-radius自动贴合。

总结

通过这段时间对css3的深入了解,发现css3真的很强大,研究起来还是挺有趣的,只有想不到,感觉没有做不到。不过为了实现很酷炫的效果,可能需要编写大量的css代码,这个时候使用什么技术就需要我们自己来衡量了。

<think>好的,我需要回答用户关于Vue3高级技巧、不常见用法和最佳实践的问题。用户之前提到过引用了一些资料,但那些引用似乎和Vue3关系不大,甚至可能有误导,比如引用[1]提到了快速排序,这明显是算法内容,和Vue无关。不过用户现在明确询问Vue3的高级技巧,所以需要抛开那些不相关的引用,专注于正确的知识点。 首先,我应该回忆Vue3的一些高级特性。比如Composition API的深入使用,响应式系统的底层原理,自定义指令的高级应用,还有组件方面的优化技巧,如递归组件、动态组件、异步组件等。此外,还有一些性能优化的方法,比如使用v-once、v-memo,或者利用Teleport和Suspense组件来优化DOM结构和加载状态。 接下来,需要整理这些知识点,确保准确性和实用性。例如,Composition API中的自定义hook可以封装可复用的逻辑,这可能是一个不常见但实用的技巧。另外,响应式方面,使用shallowRef和markRaw来优化性能,避免不必要的响应式追踪,这也是高级用法之一。 还要考虑到组件通信的高级方法,比如使用provide/inject结合Symbol作为键,确保注入的安全性。另外,模板引用(ref)的动态使用,尤其是在循环或条件渲染中,可能有些用户不太熟悉。 异步组件的懒加载和代码分割也是性能优化的重要部分,可以结合defineAsyncComponent和Webpack的动态导入来实现。Teleport组件用于将子节点渲染到DOM中的其他位置,这在处理模态框或通知时非常有用,但可能被忽视。 另外,自定义指令的高级用法,比如创建防抖点击指令,或者集成第三方库如GSAP,这也是值得提及的。还有,基于Vue3的TypeScript支持,如何利用泛型和类型推断来增强代码的健壮性,可能属于最佳实践的一部分。 需要验证每个技巧的正确性,比如v-memo的使用场景,确保在大型列表中的正确应用。递归组件的使用,需要命名组件的重要性,避免无限循环的问题。动态组件的:is绑定,可能需要结合keep-alive来保持状态。 最后,整理这些内容,分点说明,确保结构清晰,语言简洁,符合用户要求的中文回答,并生成相关问题。检查是否有遗漏的重要技巧,比如渲染函数的JSX用法,或者使用Composition API替代Mixins的优势,这些都是Vue3推荐的最佳实践。</think>### Vue3 高级技巧与不常见用法解析 #### 一、组件深度控制技巧 1. **递归组件命名强制要求** Vue3 要求递归组件必须显式声明 `name` 选项,否则会导致栈溢出: ```javascript export default { name: &#39;TreeItem&#39;, // 必须显式命名 template: `<div><TreeItem v-for="item in children"/></div>` } ``` 2. **动态组件状态保持** 使用 `<KeepAlive>` 包裹动态组件时,配合 `:include` 属性精准控制缓存策略: ```vue <KeepAlive :include="[&#39;TabA&#39;, &#39;TabC&#39;]]"> <component :is="currentComponent"/> </KeepAlive> ``` #### 二、响应式系统高级用法 1. **非深度响应式控制** 使用 `shallowRef` + `triggerRef` 实现手动触发更新: ```javascript const state = shallowRef({ count: 0 }) // 修改不会自动触发更新 state.value.count++ // 手动触发更新 triggerRef(state) ``` 2. **冻结大型数据集** 通过 `markRaw` 避免不必要响应式追踪: ```javascript const heavyData = markRaw(fetchBigData()) ``` #### 三、模板编译黑科技 1. **v-memo 性能优化** 在大型列表渲染中精准控制更新范围: ```vue <div v-for="item in list" :key="item.id" v-memo="[item.id === selectedId]"> {{ item.content }} </div> ``` 2. **内联模板(SSR场景)** Server Side Render 中特殊用法: ```vue <script type="text/x-template" id="custom-template"> <div>{{ dynamicContent }}</div> </script> ``` #### 四、Composition API 进阶 1. **Effect作用域控制** 使用 `effectScope` 批量管理副作用: ```javascript const scope = effectScope() scope.run(() => { watch(data, () => { /*...*/ }) watchEffect(() => { /*...*/ }) }) // 批量清理 scope.stop() ``` 2. **自定义 Ref 工厂** 创建带校验逻辑的 ref: ```javascript function validatedRef(value, validator) { return customRef((track, trigger) => ({ get() { track(); return value }, set(newVal) { if (validator(newVal)) { value = newVal trigger() } } })) } ``` #### 五、渲染函数妙用 1. **JSX 片段加速开发** 结合 TypeScript 的类型推断: ```tsx render() { return (<> <NavBar/> <main>{this.content}</main> </>) } ``` 2. **动态插槽生成器** 使用 `h()` 函数创建动态插槽内容: ```javascript render() { return h(MyComponent, {}, { default: () => [h(&#39;div&#39;, this.dynamicContent)] }) } ``` #### 六、性能优化实践 1. **组件懒加载策略** 配合 Suspense 实现分段加载: ```javascript const HeavyComponent = defineAsyncComponent({ loader: () => import(&#39;./Heavy.vue&#39;), timeout: 3000, suspensible: true }) ``` 2. **Web Worker 集成** 通过 `worker-plugin` 实现 CPU 密集型任务分流: ```javascript const worker = new ComlinkWorker(new URL(&#39;./worker.js&#39;, import.meta.url)) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值